-
Notifications
You must be signed in to change notification settings - Fork 2.9k
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
[$250] Web/Desktop - Emoji Picker - Nothing happens when user press "Enter" on emoji category icon #50561
Comments
Triggered auto assignment to @trjExpensify ( |
@trjExpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors |
ProposalPlease re-state the problem that we are trying to solve in this issue.Pressing Enter doesn't do anything on the emoji category button. What is the root cause of that problem?In the emoji picker menu code, we have a keydown listener which calls prevent default when we press ENTER. App/src/components/EmojiPicker/EmojiPickerMenu/index.tsx Lines 142 to 148 in 8f5ba1e
Then, we also have an ENTER shortcut which also enables the prevent default. App/src/components/EmojiPicker/EmojiPickerMenu/index.tsx Lines 165 to 188 in 8f5ba1e
The code in the shortcut was previously in the keydown listener. So, the issue is, that we always prevent default when ENTER without checking whether there is any emoji currently being highlighted or not. So, pressing ENTER on the emoji category does nothing. What changes do you think we should make in order to solve the problem?Remove the prevent default and stop propagation from the keydown listener, App/src/components/EmojiPicker/EmojiPickerMenu/index.tsx Lines 142 to 148 in 8f5ba1e
and move it inside the ENTER shortcut and call it if there is a highlighted emoji, just like how it was before. App/src/components/EmojiPicker/EmojiPickerMenu/index.tsx Lines 178 to 187 in 8f5ba1e
And set the After applying the solution, we still have another case to fix as mentioned here. App/src/components/EmojiPicker/EmojiPickerMenu/index.tsx Lines 117 to 128 in 96ffbfe
However, when clearing the search keyword, we don't reset the highlight state. So, when pressing enter, the index item will be 0. And because index 0 is a header, no emoji will be selected and prevent default is still called. App/src/components/EmojiPicker/EmojiPickerMenu/index.tsx Lines 173 to 185 in 96ffbfe
To fix it, we should reset the highlight first state back when clearing the search keyword here.
And, we can move the prevent default inside the if, App/src/components/EmojiPicker/EmojiPickerMenu/index.tsx Lines 182 to 185 in 96ffbfe
so we will only prevent the default when an emoji will be selected. |
Why was it moved in the first place? |
Looking at the regression test linked in the OP, it's a bit ambiguous that pressing enter there should jump to the emoji category:
|
It's to fix this issue: #47272 Basically, we have 2 ENTER shortcuts (Form and Emoji Picker) which are subscribed in a different way. |
@trjExpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues! |
Job added to Upwork: https://www.upwork.com/jobs/~021846197861822341766 |
Triggered auto assignment to Contributor-plus team member for initial proposal review - @ahmedGaber93 ( |
Hm okay, CC: @Krishna2323 @rayane-djouah for vis that the fix for that apparently broke this. |
@ahmedGaber93 can you review this proposal, please? Thanks! |
can i start work on this issue.. |
/assign |
@siddhakdak you can read the guideline to know how you can start. |
@bernhardoj Thanks for the proposal
20241015185548339.mp4 |
Updated my proposal to fix that |
@bernhardoj's proposal LGTM! 🎀 👀 🎀 C+ reviewed |
Triggered auto assignment to @aldo-expensify, see https://stackoverflow.com/c/expensify/questions/7972 for more details. |
📣 @ahmedGaber93 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app! |
PR is ready cc: @ahmedGaber93 |
@trjExpensify , I think we should also include this in the scope of this issue: #50971 (comment), otherwise just fixing the ENTER in the category is a bit useless. |
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Version Number: 9.0.47-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5072091
Email or phone of affected tester (no customers): fischer9966@gmail.com
Issue reported by: Applause - Internal Team
Action Performed:
Expected Result:
The emoji list scrolls to the selected category
Actual Result:
Nothing happens when user press "Enter" key on emoji category icon
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Screenshots/Videos
Add any screenshot/video evidence
Bug6630237_1728526095969.Web-Emoji-Picker-Category-Select-with-keys.mp4
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @ahmedGaber93The text was updated successfully, but these errors were encountered: