[HOLD for payment 2023-07-24] [$1000] The new emoji search field focus inconsistent between mweb chrome and web chrome

[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. Go to staging dot on web chrome and go to any chat. Select emoji picker and notice that the search field is focused by default
2. Follow the same process on mweb chrome and notice that the search field doesn't have focus while opening the emoji picker

Expected Result:

The new emoji search field focus should be consistent between mweb chrome and web chrome

Actual Result:

The new emoji search field focus is inconsistent between mweb chrome and web chrome

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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.3.29-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

Record_2023-06-17-00-55-30.mp4

error-2023-06-09_15.38.29.1.mp4

emoji.1.mp4

Expensify/Expensify Issue URL:
Issue reported by: @priya-zha
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1686304700678499

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011663a64195fe4bdf
• Upwork Job ID: 1671324047938600960
• Last Price Increase: 2023-06-28

[melvin-bot]

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

[melvin-bot]

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

[dummy-1111]

Proposal

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

Emoji search field isn't focused when open emoji picker on mobile web

What is the root cause of that problem?

We prevent focusing on modal show event for mobile devices here

App/src/components/EmojiPicker/EmojiPicker.js

Line 148 in ffd9672

if (!this.emojiSearchInput || this.props.isSmallScreenWidth) {

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

Remove the this.props.isSmallScreenWidth checking

        if (!this.emojiSearchInput || this.props.isSmallScreenWidth) {
            return;
        }

Result

20979_android_chrome.mp4

What alternative solutions did you explore? (Optional)

[anmurali]

Can reproduce. Assigning an external label.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~011663a64195fe4bdf

[melvin-bot]

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

[melvin-bot]

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

[kamaljitSharma21]

Proposal

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

The new emoji search field focus inconsistent between mweb chrome and web chrome

What is the root cause of that problem?

We have disabled the autofocus on the search textinput of emojipicker when smallscreen is detected thats why the focus in web chrome and mweb chrome are not the same.

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

Here on this line we need to remove condition of autoFocus from the search textinput.

updated code :

<TextInput
  label={this.props.translate('common.search')}
  onChangeText={this.filterEmojis}
  defaultValue=""
  ref={(el) => (this.searchInput = el)}
  autoFocus
  selectTextOnFocus={this.state.selectTextOnFocus}
  onSelectionChange={this.onSelectionChange}
  onFocus={() => this.setState({isFocused: true, highlightedIndex: -1, isUsingKeyboardMovement: false})}
  onBlur={() => this.setState({isFocused: false})}
  autoCorrect={false}
/>

Sample Video of Result :

Record.mp4

What alternative solutions did you explore? (Optional)

NA

[tienifr]

Proposal

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

The auto focus behavior of emoji picker's search field is inconsistent between mWeb chrome and Web

What is the root cause of that problem?

I don't think the expected result is correct. Sometimes user only want to select an emoji, they don't want to search for it but the keyboard suddenly popups which is very inconvenient, especially on small screen devices. Thus the check here is on purpose:

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Line 501 in 342d4fd

autoFocus={!this.props.isSmallScreenWidth}

FIY, before that, we do not show search field on small screen devices since it toggles keyboard and thus may overflow on some short devices.

In this case, the key is we want to resolve the inconsistency, for that we can:

1. Make search field not auto-focus on both desktop and mobile; OR
2. Make search field on mobile focus automatically to match with desktop

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

To solve 1, remove this line:

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Line 501 in 342d4fd

autoFocus={!this.props.isSmallScreenWidth}

What alternative solutions did you explore? (Optional)

To solve 2, remove the condition !this.props.isSmallScreenWidth from the above line

[anmurali]

@aimane-chnaif can you please review the proposal above?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[kamaljitSharma21]

@aimane-chnaif any updates on the proposal review ?

[melvin-bot]

@anmurali, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@anmurali @aimane-chnaif this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[anmurali]

Going to bump in the slack thread

[madmax330]

awaiting payment

[aimane-chnaif]

No PRs caused regression. This is more like UX improvement than bug on resized web with small width.

[madmax330]

Not overdue

[madmax330]

Not overdue

[aimane-chnaif]

@anmurali payment is due, 2 weeks already

[madmax330]

Bump @anmurali

[anmurali]

Payments

• Reporting bonus $250 @priya-zha - Offer here, pending acceptance
• Contributor and Contributor + payment $1,000 @aimane-chnaif - Paid
• Contributor and Contributor + payment $1,000 @situchan - Offer here, pending acceptance

[aimane-chnaif]

@anmurali this is eligible for timeline bonus

• contributor assigned on Jul 10, 10am
• C+ approved on Jul 12, 11am
• PR merged without any changes on Jul 13, 15pm

[anmurali]

I will add it, but curious if there is a bug #20979 (comment)

[aimane-chnaif]

That's correct in theory. But we agreed that after C+ approval and changes were not requested, still apply bonus even though engineer merging time is delayed

[melvin-bot]

@madmax330, @anmurali, @aimane-chnaif, @situchan Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

@madmax330, @anmurali, @aimane-chnaif, @situchan Eep! 4 days overdue now. Issues have feelings too...

[madmax330]

@aimane-chnaif so we still need to pay out the bonuses here?

[anmurali]

No it is done!