Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: picker an arrow navigation #3871

Merged
merged 7 commits into from
Jul 9, 2021

Conversation

parasharrajat
Copy link
Member

@parasharrajat parasharrajat commented Jul 2, 2021

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

@parasharrajat parasharrajat marked this pull request as ready for review July 4, 2021 01:18
@parasharrajat parasharrajat requested a review from a team as a code owner July 4, 2021 01:18
@MelvinBot MelvinBot requested review from roryabraham and removed request for a team July 4, 2021 01:18
Copy link
Contributor

@roryabraham roryabraham left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@@ -110,7 +105,9 @@ class EmojiPickerMenu extends Component {
this.props.onEmojiSelected(this.state.filteredEmojis[this.state.highlightedIndex].code);
}
};
document.addEventListener('keydown', this.keyDownHandler);

// Keyboard events are not bubbling in RN-Web
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Member Author

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
Copy link
Contributor

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 roryabraham closed this Jul 7, 2021
@roryabraham roryabraham reopened this Jul 7, 2021
@roryabraham
Copy link
Contributor

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

@parasharrajat
Copy link
Member Author

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

@jasperhuangg
Copy link
Contributor

jasperhuangg commented Jul 8, 2021

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

Copy link
Contributor

@roryabraham roryabraham left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

src/pages/home/report/EmojiPickerMenu/index.js Outdated Show resolved Hide resolved
Co-authored-by: Rory Abraham <47436092+roryabraham@users.noreply.github.com>
@parasharrajat
Copy link
Member Author

parasharrajat commented Jul 8, 2021

Updated @roryabraham.

@parasharrajat
Copy link
Member Author

@roryabraham Gentle bump. Thanks

@roryabraham roryabraham merged commit 0287c8c into Expensify:main Jul 9, 2021
@OSBotify
Copy link
Contributor

OSBotify commented Jul 9, 2021

✋ 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
Copy link
Contributor

🚀 Deployed to production in version: 1.0.77-5🚀

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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