From 5dbbf9191b469c06121a70c4e30d3f28fce2464c Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Fri, 8 Mar 2024 23:47:46 +0300
Subject: [PATCH 1/3] fix disabled indexes check loop

---
 src/hooks/useArrowKeyFocusManager.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useArrowKeyFocusManager.ts b/src/hooks/useArrowKeyFocusManager.ts
index 78ffc7f87209..458a39d91ca5 100644
--- a/src/hooks/useArrowKeyFocusManager.ts
+++ b/src/hooks/useArrowKeyFocusManager.ts
@@ -84,7 +84,10 @@ export default function useArrowKeyFocusManager({
             while (disabledIndexes.includes(newFocusedIndex)) {
                 newFocusedIndex -= allowHorizontalArrowKeys ? itemsPerRow : 1;
                 if (newFocusedIndex < 0) {
-                    break;
+                    if (disableCyclicTraversal) {
+                        break;
+                    }
+                    newFocusedIndex = maxIndex;
                 }
                 if (newFocusedIndex === currentFocusedIndex) {
                     // all indexes are disabled
@@ -127,8 +130,11 @@ export default function useArrowKeyFocusManager({
                     newFocusedIndex += allowHorizontalArrowKeys ? itemsPerRow : 1;
                 }
 
-                if (newFocusedIndex < 0) {
-                    break;
+                if (newFocusedIndex > maxIndex) {
+                    if (disableCyclicTraversal) {
+                        break;
+                    }
+                    newFocusedIndex = 0;
                 }
                 if (newFocusedIndex === currentFocusedIndex) {
                     // all indexes are disabled

From fb68564bff2541d980ed319597b602da46ebcfc4 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Sat, 9 Mar 2024 00:09:44 +0300
Subject: [PATCH 2/3] return actualindex

---
 src/hooks/useArrowKeyFocusManager.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useArrowKeyFocusManager.ts b/src/hooks/useArrowKeyFocusManager.ts
index 458a39d91ca5..7a674b46c337 100644
--- a/src/hooks/useArrowKeyFocusManager.ts
+++ b/src/hooks/useArrowKeyFocusManager.ts
@@ -132,7 +132,7 @@ export default function useArrowKeyFocusManager({
 
                 if (newFocusedIndex > maxIndex) {
                     if (disableCyclicTraversal) {
-                        break;
+                        return actualIndex;
                     }
                     newFocusedIndex = 0;
                 }

From 535cad796c4bd2105c53069d24a92a0e59111892 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Sat, 9 Mar 2024 00:21:42 +0300
Subject: [PATCH 3/3] use allowNegativeIndexes prop

---
 src/components/EmojiPicker/EmojiPickerMenu/index.js | 1 +
 src/hooks/useArrowKeyFocusManager.ts                | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index 25a40a709658..ecfcdd70336f 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -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,
     });
 
     const filterEmojis = _.throttle((searchTerm) => {
diff --git a/src/hooks/useArrowKeyFocusManager.ts b/src/hooks/useArrowKeyFocusManager.ts
index 7a674b46c337..b11999d61cf3 100644
--- a/src/hooks/useArrowKeyFocusManager.ts
+++ b/src/hooks/useArrowKeyFocusManager.ts
@@ -12,6 +12,7 @@ type Config = {
     itemsPerRow?: number;
     disableCyclicTraversal?: boolean;
     disableHorizontalKeys?: boolean;
+    allowNegativeIndexes?: boolean;
 };
 
 type UseArrowKeyFocusManager = [number, (index: number) => void];
@@ -44,6 +45,7 @@ export default function useArrowKeyFocusManager({
     itemsPerRow,
     disableCyclicTraversal = false,
     disableHorizontalKeys = false,
+    allowNegativeIndexes = false,
 }: Config): UseArrowKeyFocusManager {
     const allowHorizontalArrowKeys = !!itemsPerRow;
     const [focusedIndex, setFocusedIndex] = useState(initialFocusedIndex);
@@ -85,6 +87,9 @@ export default function useArrowKeyFocusManager({
                 newFocusedIndex -= allowHorizontalArrowKeys ? itemsPerRow : 1;
                 if (newFocusedIndex < 0) {
                     if (disableCyclicTraversal) {
+                        if (!allowNegativeIndexes) {
+                            return actualIndex;
+                        }
                         break;
                     }
                     newFocusedIndex = maxIndex;
@@ -96,7 +101,7 @@ export default function useArrowKeyFocusManager({
             }
             return newFocusedIndex;
         });
-    }, [allowHorizontalArrowKeys, disableCyclicTraversal, disabledIndexes, itemsPerRow, maxIndex]);
+    }, [allowHorizontalArrowKeys, disableCyclicTraversal, disabledIndexes, itemsPerRow, maxIndex, allowNegativeIndexes]);
 
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ARROW_UP, arrowUpCallback, arrowConfig);