Merge pull request #18462 from huzaifa-99/fix-infinite-loading-when-n…

…avigated-before-plaid Block navigation shortcuts when plaid modal is loading/shown
Expensify · May 9, 2023 · 144979b · 144979b
2 parents 5e69967 + fc7666a
commit 144979b
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/src/CONST.js b/src/CONST.js
@@ -23,6 +23,9 @@ const keyInputEnter = lodashGet(KeyCommand, 'constants.keyInputEnter', 'keyInput
 const keyInputUpArrow = lodashGet(KeyCommand, 'constants.keyInputUpArrow', 'keyInputUpArrow');
 const keyInputDownArrow = lodashGet(KeyCommand, 'constants.keyInputDownArrow', 'keyInputDownArrow');
 
+// describes if a shortcut key can cause navigation
+const KEYBOARD_SHORTCUT_NAVIGATION_TYPE = 'NAVIGATION_SHORTCUT';
+
 const CONST = {
     ANDROID_PACKAGE_NAME,
     ANIMATED_TRANSITION: 300,
@@ -255,6 +258,7 @@ const CONST = {
                 [PLATFORM_OS_MACOS]: {input: 'k', modifierFlags: keyModifierCommand},
                 [PLATFORM_IOS]: {input: 'k', modifierFlags: keyModifierCommand},
             },
+            type: KEYBOARD_SHORTCUT_NAVIGATION_TYPE,
         },
         NEW_GROUP: {
             descriptionKey: 'newGroup',
@@ -265,6 +269,7 @@ const CONST = {
                 [PLATFORM_OS_MACOS]: {input: 'k', modifierFlags: keyModifierShiftCommand},
                 [PLATFORM_IOS]: {input: 'k', modifierFlags: keyModifierShiftCommand},
             },
+            type: KEYBOARD_SHORTCUT_NAVIGATION_TYPE,
         },
         SHORTCUT_MODAL: {
             descriptionKey: 'openShortcutDialog',
@@ -342,6 +347,9 @@ const CONST = {
             modifiers: [],
         },
     },
+    KEYBOARD_SHORTCUTS_TYPES: {
+        NAVIGATION_SHORTCUT: KEYBOARD_SHORTCUT_NAVIGATION_TYPE,
+    },
     KEYBOARD_SHORTCUT_KEY_DISPLAY_NAME: {
         CONTROL: 'CTRL',
         ESCAPE: 'ESC',

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
@@ -22,6 +22,8 @@ import getBankIcon from './Icon/BankIcons';
 import Icon from './Icon';
 import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView';
 import {withNetwork} from './OnyxProvider';
+import CONST from '../CONST';
+import KeyboardShortcut from '../libs/KeyboardShortcut';
 
 const propTypes = {
     /** Contains plaid data */
@@ -74,9 +76,12 @@ class AddPlaidBankAccount extends React.Component {
         super(props);
 
         this.getPlaidLinkToken = this.getPlaidLinkToken.bind(this);
+        this.subscribedKeyboardShortcuts = [];
     }
 
     componentDidMount() {
+        this.subscribeToNavigationShortcuts();
+
         // If we're coming from Plaid OAuth flow then we need to reuse the existing plaidLinkToken
         if (this.isAuthenticatedWithPlaid()) {
             return;
@@ -94,6 +99,10 @@ class AddPlaidBankAccount extends React.Component {
         BankAccounts.openPlaidBankLogin(this.props.allowDebit, this.props.bankAccountID);
     }
 
+    componentWillUnmount() {
+        this.unsubscribeToNavigationShortcuts();
+    }
+
     /**
      * @returns {String}
      */
@@ -116,6 +125,33 @@ class AddPlaidBankAccount extends React.Component {
                 || !_.isEmpty(lodashGet(this.props.plaidData, 'errors')));
     }
 
+    /**
+     * Blocks the keyboard shortcuts that can navigate
+     */
+    subscribeToNavigationShortcuts() {
+        // find and block the shortcuts
+        const shortcutsToBlock = _.filter(CONST.KEYBOARD_SHORTCUTS, x => x.type === CONST.KEYBOARD_SHORTCUTS_TYPES.NAVIGATION_SHORTCUT);
+        this.subscribedKeyboardShortcuts = _.map(
+            shortcutsToBlock,
+            shortcut => KeyboardShortcut.subscribe(
+                shortcut.shortcutKey,
+                () => {}, // do nothing
+                shortcut.descriptionKey,
+                shortcut.modifiers,
+                false,
+                () => lodashGet(this.props.plaidData, 'bankAccounts', []).length > 0, // start bubbling when there are bank accounts
+            ),
+        );
+    }
+
+    /**
+     * Unblocks the keyboard shortcuts that can navigate
+     */
+    unsubscribeToNavigationShortcuts() {
+        _.each(this.subscribedKeyboardShortcuts, unsubscribe => unsubscribe());
+        this.subscribedKeyboardShortcuts = [];
+    }
+
     render() {
         const plaidBankAccounts = lodashGet(this.props.plaidData, 'bankAccounts') || [];
         const token = this.getPlaidLinkToken();