Emoji picker - Unable to navigate with arrow keys when there's text in search box

[isagoico]

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. Navigate to e.cash
2. Navigate to a conversation
3. Click on the emoji icon
4. Type something in the search box
5. Press down arrow key to navigate through the options

Expected Result:

User should be able to navigate the emoji list with arrow keys after pressing the down arrow

Actual Result:

Pressing the down arrow does not allow the user to navigate through the emoji list

Workaround:

User has to manually select the emoji with the mouse cursor

Platform:

Where is this issue occurring?

Web ✔️
iOS
Android
Desktop App ✔️
Mobile Web

Version Number: 1.0.74-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

2021-07-01_08-53-32.mp4

Expensify/Expensify Issue URL:

View all open jobs on Upwork

---

From @mallenexpensify https://expensify.slack.com/archives/C01GTK53T8Q/p1625155126323200?thread_ts=1625154887.322400&cid=C01GTK53T8Q

With cursor in compose box, click tab > enter
Start typing a search for an emoji.
Observe you can't click the down arrow to then navigate the emoji selector to choose which emoji you want.

[MelvinBot]

Triggered auto assignment to @roryabraham (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

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

[MitchExpensify]

Upwork job!

[parasharrajat]

Proposal

1. Due to the recent Upgrade of RN-Web version, we faced one issue where keyboard events are not bubbling from the TextInput. @roryabraham Add capturing event listeners to the KeyboardShortcut library #3555 fixed one of the issues where keyboard shortcut was not opening the search when Focused on the composer.

A similar thing is happening here, we already have arrow navigation for the Emojipicker but events are not bubbling so to fix this we need to attach the event in the capture phase.

So we update this line https://github.com/Expensify/Expensify.cash/blob/824e85f8099cdf903e88107c0b33d47ed93882ff/src/pages/home/report/EmojiPickerMenu/index.js#L113.

as

   document.addEventListener('keydown', this.keyDownHandler, true);

which fixes the arrow navigation.

Suggestion

1. we block arrows while searching for emojis to enable the arrow navigation on the Emoji picker but that seems a bad UX. Instead, I propose that a Down Arrow key would enable the arrow navigation on the emoji list while the text box is focused or the cursor is visible on the Search box. Then, arrow navigation will run as normal as now. I found that Slack has the same behavior.

Video showing my suggestion with the bug fix. Notice now Arrows are not blocked on the search input and we can move the cursor around.

emojipicker.mp4

[rushatgabhane]

Proposal

When ArrowDown is pressed, unfocus the search.
This way you can use left/right arrow keys to move search cursor.

In src/pages/home/report/EmojiPickerMenu/index.js

<TextInputFocusable
    ... 
    onKeyPress={this.unfocusSearchOnArrowDown}
>
unfocusSearchOnArrowDown(key) {
    if (key.code === 'ArrowDown') {
        this.searchInput.blur();
    }
}

Expensify.cash.-.Google.Chrome.2021-07-02.18-33-25.mp4

This is how whatsapp web has it's emoji picker implemented.

[rushatgabhane]

@parasharrajat's proposal is better as it fixes the bug.
while mine is a hack.

[roryabraham]

@parasharrajat Great proposal as always! I agree that it's better to allow arrow keys to move the cursor around in the text input, then activate emoji-selection only with the down arrow key. When in the top row of emoji, the up-arrow key should refocus the text input.

[parasharrajat]

When in the top row of emoji, the up-arrow key should refocus the text input.

Sure, I will add that too. Point taken.