[HOLD for payment 2023-05-16] [$1000] The Emoji suggestion is flickered when adding attachment

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open any chat
2. Entering :smi and observe the emoji suggestion is appear
3. Click + button on the left of composer
4. Click on Add Attachment and observe that the emoji suggestion is appear on a moment
5. Close attachment and observe the composer is focus but the emoji suggestion is not appeared

Expected Result:

The emoji suggestion is not flickered and it should be displayed when the composer is focus

Actual Result:

The Emoji suggestion is flickered when adding attachment and it isn’t displayed when the composer is focus

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.2.95-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-04-05.at.09.39.19.mov

Recording.141.mp4

Expensify/Expensify Issue URL:
Issue reported by: @tienifr
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1680662678402299

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b73cd2c4c5df346d
• Upwork Job ID: 1643787501583937536
• Last Price Increase: 2023-04-27

[MelvinBot]

Triggered auto assignment to @arielgreen (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~01b73cd2c4c5df346d

[MelvinBot]

Current assignee @arielgreen is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @sobitneupane (External)

[MelvinBot]

Triggered auto assignment to @AndrewGable (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[jjcoffee]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The emoji picker is appearing in between selecting the attachment menu item and the file selector opening.

What is the root cause of that problem?

We are inadvertently returning focus to the composer when the attachment menu item is selected. This is because we are forcing focus here:

App/src/pages/home/report/ReportActionCompose.js

Lines 232 to 238 in 313c575

	// We want to focus or refocus the input when a modal has been closed and the underlying screen is focused.
	// We avoid doing this on native platforms since the software keyboard popping
	// open creates a jarring and broken UX.
	if (this.willBlurTextInputOnTapOutside && this.props.isFocused
	&& prevProps.modal.isVisible && !this.props.modal.isVisible) {
	this.focus();
	}

The issue is we are only checking for modal.isVisible, but the file selector is not a modal so we are always going to return focus to the composer input when the file selector opens.

What changes do you think we should make in order to solve the problem?

I suggest we add a new state, isFilePickerOpen, which we set to true when the file picker is opened and which then will be used to block the emoji suggestions from showing. We then set it back to false when either the window receives focus (i.e. on cancel) or the AttachmentModal is closed. Unfortunately, when the file picker is dismissed the order of events that fire (i.e. onChange and window focus) is inconsistent between browsers/platforms, so we need a workaround (I have a few options below) to ensure it works everywhere.

First we need to update this section to add the new state and an event listener for the window regaining focus.

App/src/pages/home/report/ReportActionCompose.js

Lines 783 to 790 in 313c575

	menuItems={[...this.getMoneyRequestOptions(reportParticipants),
	{
	icon: Expensicons.Paperclip,
	text: this.props.translate('reportActionCompose.addAttachment'),
	onSelected: () => {
	openPicker({
	onPicked: displayFileInModal,
	});

onSelected: () => {
    this.setState({isFilePickerOpen: true});
    window.addEventListener('focus', this.filePickerClosed);
    openPicker({
        onPicked: displayFileInModal,
    });
}

When the window regains focus we want to force focus onto the composer:

filePickerClosed() {
    this.focus();
    window.removeEventListener('focus', this.filePickerClosed);
}

By forcing focus without setting isFilePickerOpen to false, we get the existing behaviour of the composer being focused but the emoji suggestions not showing. Current behaviour here:

emoji-flicker-issue-original-cancel-behaviour-2023-04-12_15.01.41.mp4

We can then set isFilePickerOpen to false on a click event on the composer, i.e. onClick={() => this.setState({isFilePickerOpen: false})}, and then the emoji suggestions will appear.

To handle a file being selected, we can need to also reset the state in when the AttachmentModal is closed here:

App/src/pages/home/report/ReportActionCompose.js

Lines 716 to 719 in 5fadec9

	<AttachmentModal
	headerTitle={this.props.translate('reportActionCompose.sendAttachment')}
	onConfirm={this.addAttachment}
	>

onModalHide={()=> {this.setState({isFilePickerOpen: false})}

Now we can add the !this.state.isFilePickerOpen check here to avoid the composer being focused whilst the file picker is open:

App/src/pages/home/report/ReportActionCompose/index.js

Lines 246 to 249 in ab9b7d9

	if (this.willBlurTextInputOnTapOutside && this.props.isFocused
	&& prevProps.modal.isVisible && !this.props.modal.isVisible) {
	this.focus();
	}

And finally we need to use the isFilePickerOpen state as an additional condition before showing the emoji suggestions, here:

App/src/pages/home/report/ReportActionCompose.js

Line 910 in 5fadec9

{!_.isEmpty(this.state.suggestedEmojis) && this.state.shouldShowSuggestionMenu && (

so that it becomes !_.isEmpty(this.state.suggestedEmojis) && this.state.shouldShowSuggestionMenu && !this.state.isFilePickerOpen &&

Demo:

emoji-flicker-issue-updated-fix-2023-04-12_16.14.17.mp4

What alternative solutions did you explore? (Optional)

Simpler alternative solution is to add some sort of state flag shouldBlockEmojiCalc (I haven't thought too hard about the name) here:

App/src/pages/home/report/ReportActionCompose.js

Lines 783 to 790 in 313c575

	menuItems={[...this.getMoneyRequestOptions(reportParticipants),
	{
	icon: Expensicons.Paperclip,
	text: this.props.translate('reportActionCompose.addAttachment'),
	onSelected: () => {
	openPicker({
	onPicked: displayFileInModal,
	});

onSelected: () => {
    this.setState({shouldBlockEmojiCalc: true});
    openPicker({
        onPicked: displayFileInModal,
    });
}

We can then add this as a check before going ahead with calculateEmojiSuggestion, which will block the suggestions from showing, and then reset the flag, which stops us needing to deal with the cancel button press (e.g. using a window focus event listener).

App/src/pages/home/report/ReportActionCompose/index.js

Lines 416 to 417 in 0276f42

	calculateEmojiSuggestion() {
	const leftString = this.state.value.substring(0, this.state.selection.end);

if (this.state.shouldBlockEmojiCalc) {
    this.setState({shouldBlockEmojiCalc:false});
    return;
}