From 978bceeb9176ebb7e7a1877c92bcc2e2bf09baf6 Mon Sep 17 00:00:00 2001
From: Krishna Gupta <belivethatkg@gmail.com>
Date: Sat, 10 Feb 2024 20:49:13 +0530
Subject: [PATCH 1/2] fix: The back and forward keys are not working properly
 for navigating back to a characters.

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
---
 .../EmojiPicker/EmojiPickerMenu/index.js          |  3 +++
 src/hooks/useArrowKeyFocusManager.ts              | 15 +++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index f336fe659074..2078565cf3da 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -109,6 +109,9 @@ function EmojiPickerMenu({forwardedRef, onEmojiSelected, activeEmoji}) {
         initialFocusedIndex: -1,
         disableCyclicTraversal: true,
         onFocusedIndexChange,
+        disableHorizontalKeys: isFocused,
+        // We need to pass isActive, we can pass true without checking visibility of the component because if the popover is not visible this picker won't be mounted
+        isActive: true,
     });
 
     const filterEmojis = _.throttle((searchTerm) => {
diff --git a/src/hooks/useArrowKeyFocusManager.ts b/src/hooks/useArrowKeyFocusManager.ts
index 352734c92e8d..78ffc7f87209 100644
--- a/src/hooks/useArrowKeyFocusManager.ts
+++ b/src/hooks/useArrowKeyFocusManager.ts
@@ -11,6 +11,7 @@ type Config = {
     isActive?: boolean;
     itemsPerRow?: number;
     disableCyclicTraversal?: boolean;
+    disableHorizontalKeys?: boolean;
 };
 
 type UseArrowKeyFocusManager = [number, (index: number) => void];
@@ -28,6 +29,7 @@ type UseArrowKeyFocusManager = [number, (index: number) => void];
  * @param [config.isActive] – Whether the component is ready and should subscribe to KeyboardShortcut
  * @param [config.itemsPerRow] – The number of items per row. If provided, the arrow keys will move focus horizontally as well as vertically
  * @param [config.disableCyclicTraversal] – Whether to disable cyclic traversal of the list. If true, the arrow keys will have no effect when the first or last item is focused
+ * @param [config.disableHorizontalKeys] – Whether to disable the right/left keys
  */
 export default function useArrowKeyFocusManager({
     maxIndex,
@@ -41,6 +43,7 @@ export default function useArrowKeyFocusManager({
     isActive,
     itemsPerRow,
     disableCyclicTraversal = false,
+    disableHorizontalKeys = false,
 }: Config): UseArrowKeyFocusManager {
     const allowHorizontalArrowKeys = !!itemsPerRow;
     const [focusedIndex, setFocusedIndex] = useState(initialFocusedIndex);
@@ -52,6 +55,14 @@ export default function useArrowKeyFocusManager({
         [isActive, shouldExcludeTextAreaNodes],
     );
 
+    const horizontalArrowConfig = useMemo(
+        () => ({
+            excludedNodes: shouldExcludeTextAreaNodes ? ['TEXTAREA'] : [],
+            isActive: isActive && !disableHorizontalKeys,
+        }),
+        [isActive, shouldExcludeTextAreaNodes, disableHorizontalKeys],
+    );
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(() => onFocusedIndexChange(focusedIndex), [focusedIndex]);
 
@@ -155,7 +166,7 @@ export default function useArrowKeyFocusManager({
         });
     }, [allowHorizontalArrowKeys, disableCyclicTraversal, disabledIndexes, maxIndex]);
 
-    useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ARROW_LEFT, arrowLeftCallback, arrowConfig);
+    useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ARROW_LEFT, arrowLeftCallback, horizontalArrowConfig);
 
     const arrowRightCallback = useCallback(() => {
         if (maxIndex < 0 || !allowHorizontalArrowKeys) {
@@ -182,7 +193,7 @@ export default function useArrowKeyFocusManager({
         });
     }, [allowHorizontalArrowKeys, disableCyclicTraversal, disabledIndexes, maxIndex]);
 
-    useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ARROW_RIGHT, arrowRightCallback, arrowConfig);
+    useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ARROW_RIGHT, arrowRightCallback, horizontalArrowConfig);
 
     // Note: you don't need to manually manage focusedIndex in the parent. setFocusedIndex is only exposed in case you want to reset focusedIndex or focus a specific item
     return [focusedIndex, setFocusedIndex];

From 7a659313930e538f37a1f74ef684305e15d07e35 Mon Sep 17 00:00:00 2001
From: Krishna Gupta <belivethatkg@gmail.com>
Date: Mon, 12 Feb 2024 17:22:46 +0530
Subject: [PATCH 2/2] update comment.

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
---
 src/components/EmojiPicker/EmojiPickerMenu/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index 2078565cf3da..b08d2106ff93 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -110,7 +110,7 @@ function EmojiPickerMenu({forwardedRef, onEmojiSelected, activeEmoji}) {
         disableCyclicTraversal: true,
         onFocusedIndexChange,
         disableHorizontalKeys: isFocused,
-        // We need to pass isActive, we can pass true without checking visibility of the component because if the popover is not visible this picker won't be mounted
+        // We pass true without checking visibility of the component because if the popover is not visible this picker won't be mounted
         isActive: true,
     });