Fix - Message action menu - Last option is not selected when pressing up key #38007
Conversation
| @@ -112,6 +112,7 @@ function EmojiPickerMenu({forwardedRef, onEmojiSelected, activeEmoji}) { | |||
| disableHorizontalKeys: isFocused, | |||
| // We pass true without checking visibility of the component because if the popover is not visible this picker won't be mounted | |||
| isActive: true, | |||
| allowNegativeIndexes: true, | |||
There was a problem hiding this comment.
Is this being used anywhere or did you just add it for possible use in the future?
There was a problem hiding this comment.
We are using it here for EmojiPickerMenu
There was a problem hiding this comment.
Ah I see yeah we're passing false for useArrowKeyFocusManager outside of that.
| @@ -84,7 +86,13 @@ export default function useArrowKeyFocusManager({ | |||
| while (disabledIndexes.includes(newFocusedIndex)) { | |||
| newFocusedIndex -= allowHorizontalArrowKeys ? itemsPerRow : 1; | |||
| if (newFocusedIndex < 0) { | |||
| break; | |||
| if (disableCyclicTraversal) { | |||
| if (!allowNegativeIndexes) { | |||
There was a problem hiding this comment.
Is this fixing something? Everything seems to work fine for me without this if statement.
There was a problem hiding this comment.
if (!allowNegativeIndexes) {
There was a problem hiding this comment.
it is the exceptional case for emoji picker menu so if you remove it, it will break the emoji picker search input auto focusing.
There was a problem hiding this comment.
Hmm strange, it seems to work just fine for me with this block removed. Am I missing something here?
Screen.Recording.2024-03-13.at.08.29.15.mov
There was a problem hiding this comment.
I wasn't talking about the removal of that logic, I thought you were asking why we need that check.
What makes EmojiPickerMenu auto-focusing to fail is the returning actualIndex part of the code but in the while loop we are iterating until we get non-disabled index but now when we reach negative index that principally means there is no non-disable index above the current actualIndex so we should return the current actualIndex index. Now comes an exceptional case as the EmojiPicker one on which we are using negative indexes to auto focus search input therefore we make an exception and when negative indexes are allowed instead of returning the actualIndex we just break.
There was a problem hiding this comment.
What makes EmojiPickerMenu auto-focusing to fail
Could you quickly demonstrate this just so I can understand what exactly we are fixing here? Thanks.
There was a problem hiding this comment.
If we use the break mechanism everything will work fine but principaly that's wrong and it will create the same issue for the future. To demonstrate that remove this block then pass disableCyclicTraversal as true for context menu here
App/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx
Lines 157 to 158 in 6e42e55
disableCyclicTraversal: true,
Now, while you are on the first active index if you press up the focus will be lost and unless u press down it will not appear that is what it will cause if we use the break logic but now as it is the emoji picker the only exceptional case we allow negative indexes to auto focus search input we are treating it as an exception.
There was a problem hiding this comment.
Ah ok so while it essentially has no effect currently, I suppose it's better for future-proofing. Thanks for the explanation!
Reviewer Checklist
Screenshots/VideosAndroid: Native01_Android_Native.mp4Android: mWeb Chrome02_Android_Chrome.mp4iOS: Native03_iOS_Native.mp4iOS: mWeb Safari04_iOS_Safari.mp4MacOS: Chrome / Safari05_MacOS_Chrome.mp4MacOS: Desktop06_MacOS_Desktop.mp4 |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/puneetlath in version: 1.4.53-0 🚀
|
|
🚀 Deployed to production by https://github.com/AndrewGable in version: 1.4.53-2 🚀
|
Details
Fixed Issues
$ #36245
PROPOSAL: #36245 (comment)
Tests
The test applies for only desktop and web.
Offline tests
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)myBool && <MyComponent />.src/languages/*files and using the translation methodWaiting for Copylabel for a copy review on the original GH to get the correct copy.STYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel so the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
2024-03-08.23-55-18.mp4
MacOS: Desktop
2024-03-08.23-55-46.mp4