From fcf6bff003f9cb53d5b42000f74a545560e9fd56 Mon Sep 17 00:00:00 2001
From: charan h s <charanengg08@gmail.com>
Date: Tue, 5 Sep 2023 22:10:22 +0530
Subject: [PATCH 1/3] state for shortcuts

---
 src/components/KeyboardShortcutsModal.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/KeyboardShortcutsModal.js b/src/components/KeyboardShortcutsModal.js
index 9d78a22b5aa8..2a634a8fce80 100644
--- a/src/components/KeyboardShortcutsModal.js
+++ b/src/components/KeyboardShortcutsModal.js
@@ -1,4 +1,4 @@
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import PropTypes from 'prop-types';
 import {View, ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
@@ -41,7 +41,7 @@ const openShortcutModalConfig = CONST.KEYBOARD_SHORTCUTS.SHORTCUT_MODAL;
 function KeyboardShortcutsModal({isShortcutsModalOpen = false, isSmallScreenWidth, translate}) {
     const subscribedOpenModalShortcuts = useRef([]);
     const modalType = isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE;
-    const shortcuts = KeyboardShortcut.getDocumentedShortcuts();
+    const [shortcuts, setShortcurts] = useState([]);
 
     /*
      * Subscribe shortcuts that only are used when the modal is open
@@ -128,6 +128,7 @@ function KeyboardShortcutsModal({isShortcutsModalOpen = false, isSmallScreenWidt
         if (isShortcutsModalOpen) {
             // The modal started open, which can happen if you reload the page when the modal is open.
             subscribeOpenModalShortcuts();
+            setShortcurts(KeyboardShortcut.getDocumentedShortcuts());
         }
 
         return () => {
@@ -138,18 +139,19 @@ function KeyboardShortcutsModal({isShortcutsModalOpen = false, isSmallScreenWidt
         };
         // We only want this to run on mount
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [KeyboardShortcut.getDocumentedShortcuts]);
 
     useEffect(() => {
         if (isShortcutsModalOpen) {
             subscribeOpenModalShortcuts();
+            setShortcurts(KeyboardShortcut.getDocumentedShortcuts());
         } else {
             // Modal is closing, remove keyboard shortcuts
             unsubscribeOpenModalShortcuts();
         }
         // subscribeOpenModalShortcuts and unsubscribeOpenModalShortcuts functions are not added as dependencies since they don't change between renders
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isShortcutsModalOpen]);
+    }, [isShortcutsModalOpen, KeyboardShortcut.getDocumentedShortcuts]);
 
     return (
         <Modal

From b9bbd110adf41109ee1f603177512a105dedde28 Mon Sep 17 00:00:00 2001
From: charan h s <charanengg08@gmail.com>
Date: Wed, 6 Sep 2023 22:16:11 +0530
Subject: [PATCH 2/3] Setting State in subscribeOpenModalShortcuts

---
 src/components/KeyboardShortcutsModal.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/KeyboardShortcutsModal.js b/src/components/KeyboardShortcutsModal.js
index 2a634a8fce80..d1d2a931603c 100644
--- a/src/components/KeyboardShortcutsModal.js
+++ b/src/components/KeyboardShortcutsModal.js
@@ -79,6 +79,7 @@ function KeyboardShortcutsModal({isShortcutsModalOpen = false, isSmallScreenWidt
             KeyboardShortcut.subscribe(arrowUpConfig.shortcutKey, () => {}, arrowUpConfig.descriptionKey, arrowUpConfig.modifiers, true),
             KeyboardShortcut.subscribe(arrowDownConfig.shortcutKey, () => {}, arrowDownConfig.descriptionKey, arrowDownConfig.modifiers, true),
         ];
+        setShortcurts(KeyboardShortcut.getDocumentedShortcuts());
     };
 
     /*
@@ -128,7 +129,6 @@ function KeyboardShortcutsModal({isShortcutsModalOpen = false, isSmallScreenWidt
         if (isShortcutsModalOpen) {
             // The modal started open, which can happen if you reload the page when the modal is open.
             subscribeOpenModalShortcuts();
-            setShortcurts(KeyboardShortcut.getDocumentedShortcuts());
         }
 
         return () => {
@@ -144,7 +144,6 @@ function KeyboardShortcutsModal({isShortcutsModalOpen = false, isSmallScreenWidt
     useEffect(() => {
         if (isShortcutsModalOpen) {
             subscribeOpenModalShortcuts();
-            setShortcurts(KeyboardShortcut.getDocumentedShortcuts());
         } else {
             // Modal is closing, remove keyboard shortcuts
             unsubscribeOpenModalShortcuts();

From 29f931056175248e458ed1c321821bed4d8fe1a6 Mon Sep 17 00:00:00 2001
From: charan h s <charanengg08@gmail.com>
Date: Thu, 7 Sep 2023 09:35:11 +0530
Subject: [PATCH 3/3] removed dep

---
 src/components/KeyboardShortcutsModal.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/KeyboardShortcutsModal.js b/src/components/KeyboardShortcutsModal.js
index d1d2a931603c..6ca3cce6412c 100644
--- a/src/components/KeyboardShortcutsModal.js
+++ b/src/components/KeyboardShortcutsModal.js
@@ -139,7 +139,7 @@ function KeyboardShortcutsModal({isShortcutsModalOpen = false, isSmallScreenWidt
         };
         // We only want this to run on mount
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [KeyboardShortcut.getDocumentedShortcuts]);
+    }, []);
 
     useEffect(() => {
         if (isShortcutsModalOpen) {
@@ -150,7 +150,7 @@ function KeyboardShortcutsModal({isShortcutsModalOpen = false, isSmallScreenWidt
         }
         // subscribeOpenModalShortcuts and unsubscribeOpenModalShortcuts functions are not added as dependencies since they don't change between renders
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isShortcutsModalOpen, KeyboardShortcut.getDocumentedShortcuts]);
+    }, [isShortcutsModalOpen]);
 
     return (
         <Modal