fix: picker an arrow navigation

[parasharrajat]

Details

1. Emoji picker - Unable to navigate with arrow keys when there's text in search box #3858 (comment)
2. Emoji picker - Unable to navigate with arrow keys when there's text in search box #3858 (comment)

Fixed Issues

$ Fixes #3858

Tests | QA Steps

1. Navigate to e.cash
2. Navigate to a conversation
3. Click on the emoji icon
4. Type something in the search box
5. Press the down arrow key to navigate through the options.
6. when at the top of the emoji list, press the Up arrow to focus the search Input.

Tested On

• Web (Affected Platform)
• Mobile Web
• Desktop (Affected Platform)
• iOS
• Android

Screenshots

Web

emojipicker.mp4

Mobile Web

Desktop

iOS

Android

[roryabraham]

Code looks good, but a few other feature notes:

1. When search is refocused, we should highlight the string so that the old search will be replaced by anything new you type.
2. When you start typing again (any key other than arrow or enter), then the search should refocus.

This one is more of a nice-to-have, but if you:

1. Hover over an emoji to highlight it.
2. Use the down-arrow to focus the emoji,
3. Then the focus will go to the one that you have hovered, which feels a bit weird to me. I think it should just highlight the first emoji in the first row.

[roryabraham]

This comment isn't super helpful in it's current state – if you include it I think it's better to explain why bubbling in this case is necessary for this feature to work.

[parasharrajat]

Then the focus will go to the one that you have hovered, which feels a bit weird to me. I think it should just highlight the first emoji in the first row.

@jasperhuangg Any input for this as you originally created the Picker.

[roryabraham]

I believe @stitesExpensify originally created the emoji picker. That last item I feel less strongly about too, so if you disagree let's just start with the first two.

[roryabraham]

My bad ... didn't mean to close this at all.

[parasharrajat]

@roryabraham 1, 2 is implemented and PR is updated. Thanks.

[jasperhuangg]

Then the focus will go to the one that you have hovered, which feels a bit weird to me. I think it should just highlight the first emoji in the first row.

@jasperhuangg Any input for this as you originally created the Picker.

I think @stitesExpensify originally implemented the UI for the picker, but anything involving arrow key presses/focusing/events was added on later by me.

So I actually set a state variable arePointerEventsDisabled to true to disable mouseover input for the EmojiPickerMenu when an arrow key is pressed, and set it to false again again when the user moves their mouse. This should prevent the issue that @roryabraham is describing here. Perhaps you can use this to tackle that issue? @parasharrajat

[roryabraham]

Looks good and tests well. Just want to clean up the comment one more time before we merge.

[parasharrajat]

Updated @roryabraham.

[parasharrajat]

@roryabraham Gentle bump. Thanks

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to production in version: 1.0.77-5🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅