From fce62f88dbf6806d6a015edea8bab65c96efebb7 Mon Sep 17 00:00:00 2001 From: azimgd Date: Tue, 2 May 2023 19:13:00 +0500 Subject: [PATCH 1/5] Add enter shortcut for KeyboardShortcutsModal so that you can close it by pressing enter --- src/components/KeyboardShortcutsModal.js | 12 +++++++++--- .../OptionsSelector/BaseOptionsSelector.js | 3 ++- src/pages/iou/steps/MoneyRequestAmountPage.js | 1 + 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/KeyboardShortcutsModal.js b/src/components/KeyboardShortcutsModal.js index a5454e280f0d..dbe18427ecf2 100644 --- a/src/components/KeyboardShortcutsModal.js +++ b/src/components/KeyboardShortcutsModal.js @@ -40,11 +40,17 @@ class KeyboardShortcutsModal extends React.Component { KeyboardShortcutsActions.showKeyboardShortcutModal(); }, openShortcutModalConfig.descriptionKey, openShortcutModalConfig.modifiers, true); - const closeShortcutModalConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE; - this.unsubscribeEscapeModal = KeyboardShortcut.subscribe(closeShortcutModalConfig.shortcutKey, () => { + const closeShortcutEscapeModalConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE; + this.unsubscribeEscapeModal = KeyboardShortcut.subscribe(closeShortcutEscapeModalConfig.shortcutKey, () => { ModalActions.close(); KeyboardShortcutsActions.hideKeyboardShortcutModal(); - }, closeShortcutModalConfig.descriptionKey, closeShortcutModalConfig.modifiers, true, true); + }, closeShortcutEscapeModalConfig.descriptionKey, closeShortcutEscapeModalConfig.modifiers, true, true); + + const closeShortcutEnterModalConfig = CONST.KEYBOARD_SHORTCUTS.ENTER; + this.unsubscribeEscapeModal = KeyboardShortcut.subscribe(closeShortcutEnterModalConfig.shortcutKey, () => { + ModalActions.close(); + KeyboardShortcutsActions.hideKeyboardShortcutModal(); + }, closeShortcutEnterModalConfig.descriptionKey, closeShortcutEnterModalConfig.modifiers, true, () => !this.props.isShortcutsModalOpen, 0); } componentWillUnmount() { diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 027899e9be9b..4f8c1425eaf8 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -70,6 +70,7 @@ class BaseOptionsSelector extends Component { enterConfig.modifiers, true, () => !this.state.allOptions[this.state.focusedIndex], + 1, ); const CTRLEnterConfig = CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER; @@ -359,7 +360,7 @@ class BaseOptionsSelector extends Component { text={defaultConfirmButtonText} onPress={this.props.onConfirmSelection} pressOnEnter - enterKeyEventListenerPriority={1} + enterKeyEventListenerPriority={2} /> )} {this.props.footerContent} diff --git a/src/pages/iou/steps/MoneyRequestAmountPage.js b/src/pages/iou/steps/MoneyRequestAmountPage.js index 7fb169fa3d84..c3fd2602c29e 100755 --- a/src/pages/iou/steps/MoneyRequestAmountPage.js +++ b/src/pages/iou/steps/MoneyRequestAmountPage.js @@ -354,6 +354,7 @@ class MoneyRequestAmountPage extends React.Component { pressOnEnter isDisabled={!this.state.amount.length || parseFloat(this.state.amount) < 0.01} text={this.props.buttonText} + enterKeyEventListenerPriority={2} /> From 3e31c4908fd5884f6d9822568e92344640f14fa5 Mon Sep 17 00:00:00 2001 From: azimgd Date: Wed, 3 May 2023 11:24:58 +0500 Subject: [PATCH 2/5] code review fixes --- src/components/KeyboardShortcutsModal.js | 13 ++++++++----- src/pages/iou/steps/MoneyRequestAmountPage.js | 2 +- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/KeyboardShortcutsModal.js b/src/components/KeyboardShortcutsModal.js index dbe18427ecf2..5903a124d344 100644 --- a/src/components/KeyboardShortcutsModal.js +++ b/src/components/KeyboardShortcutsModal.js @@ -41,24 +41,27 @@ class KeyboardShortcutsModal extends React.Component { }, openShortcutModalConfig.descriptionKey, openShortcutModalConfig.modifiers, true); const closeShortcutEscapeModalConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE; - this.unsubscribeEscapeModal = KeyboardShortcut.subscribe(closeShortcutEscapeModalConfig.shortcutKey, () => { + this.unsubscribeCloseEscapeModal = KeyboardShortcut.subscribe(closeShortcutEscapeModalConfig.shortcutKey, () => { ModalActions.close(); KeyboardShortcutsActions.hideKeyboardShortcutModal(); }, closeShortcutEscapeModalConfig.descriptionKey, closeShortcutEscapeModalConfig.modifiers, true, true); const closeShortcutEnterModalConfig = CONST.KEYBOARD_SHORTCUTS.ENTER; - this.unsubscribeEscapeModal = KeyboardShortcut.subscribe(closeShortcutEnterModalConfig.shortcutKey, () => { + this.unsubscribeCloseEnterModal = KeyboardShortcut.subscribe(closeShortcutEnterModalConfig.shortcutKey, () => { ModalActions.close(); KeyboardShortcutsActions.hideKeyboardShortcutModal(); - }, closeShortcutEnterModalConfig.descriptionKey, closeShortcutEnterModalConfig.modifiers, true, () => !this.props.isShortcutsModalOpen, 0); + }, closeShortcutEnterModalConfig.descriptionKey, closeShortcutEnterModalConfig.modifiers, true, () => !this.props.isShortcutsModalOpen); } componentWillUnmount() { if (this.unsubscribeShortcutModal) { this.unsubscribeShortcutModal(); } - if (this.unsubscribeEscapeModal) { - this.unsubscribeEscapeModal(); + if (this.unsubscribeCloseEscapeModal) { + this.unsubscribeCloseEscapeModal(); + } + if (this.unsubscribeCloseEnterModal) { + this.unsubscribeCloseEnterModal(); } } diff --git a/src/pages/iou/steps/MoneyRequestAmountPage.js b/src/pages/iou/steps/MoneyRequestAmountPage.js index c3fd2602c29e..fd788003823b 100755 --- a/src/pages/iou/steps/MoneyRequestAmountPage.js +++ b/src/pages/iou/steps/MoneyRequestAmountPage.js @@ -354,7 +354,7 @@ class MoneyRequestAmountPage extends React.Component { pressOnEnter isDisabled={!this.state.amount.length || parseFloat(this.state.amount) < 0.01} text={this.props.buttonText} - enterKeyEventListenerPriority={2} + enterKeyEventListenerPriority={1} /> From f90358ac83b14462dcfb4660eabd1156c36db1f3 Mon Sep 17 00:00:00 2001 From: azimgd Date: Wed, 3 May 2023 14:03:38 +0500 Subject: [PATCH 3/5] decrease split bill modal enter key subscriber --- src/components/ButtonWithMenu.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ButtonWithMenu.js b/src/components/ButtonWithMenu.js index eea6b5ffb835..1f8d9a7c0ec5 100644 --- a/src/components/ButtonWithMenu.js +++ b/src/components/ButtonWithMenu.js @@ -75,6 +75,7 @@ class ButtonWithMenu extends PureComponent { text={selectedItem.text} onPress={event => this.props.onPress(event, this.props.options[0].value)} pressOnEnter + enterKeyEventListenerPriority={1} /> )} {this.props.options.length > 1 && ( From f1e0c4c8bcb01dcbf6d1d08b35e7c2b3cbb95d63 Mon Sep 17 00:00:00 2001 From: azimgd Date: Wed, 3 May 2023 14:33:21 +0500 Subject: [PATCH 4/5] intercept arrow shortcuts --- src/components/ArrowKeyFocusManager.js | 4 ++-- src/components/KeyboardShortcutsModal.js | 22 ++++++++++++++++++++++ 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/components/ArrowKeyFocusManager.js b/src/components/ArrowKeyFocusManager.js index 72a590547fa0..e548067f17aa 100644 --- a/src/components/ArrowKeyFocusManager.js +++ b/src/components/ArrowKeyFocusManager.js @@ -52,7 +52,7 @@ class ArrowKeyFocusManager extends Component { } this.props.onFocusedIndexChanged(newFocusedIndex); - }, arrowUpConfig.descriptionKey, arrowUpConfig.modifiers, true, false, 0, true, [this.props.shouldExcludeTextAreaNodes && 'TEXTAREA']); + }, arrowUpConfig.descriptionKey, arrowUpConfig.modifiers, true, false, 1, true, [this.props.shouldExcludeTextAreaNodes && 'TEXTAREA']); this.unsubscribeArrowDownKey = KeyboardShortcut.subscribe(arrowDownConfig.shortcutKey, () => { if (this.props.maxIndex < 0) { @@ -70,7 +70,7 @@ class ArrowKeyFocusManager extends Component { } this.props.onFocusedIndexChanged(newFocusedIndex); - }, arrowDownConfig.descriptionKey, arrowDownConfig.modifiers, true, false, 0, true, [this.props.shouldExcludeTextAreaNodes && 'TEXTAREA']); + }, arrowDownConfig.descriptionKey, arrowDownConfig.modifiers, true, false, 1, true, [this.props.shouldExcludeTextAreaNodes && 'TEXTAREA']); } componentWillUnmount() { diff --git a/src/components/KeyboardShortcutsModal.js b/src/components/KeyboardShortcutsModal.js index 5903a124d344..49052937c424 100644 --- a/src/components/KeyboardShortcutsModal.js +++ b/src/components/KeyboardShortcutsModal.js @@ -40,6 +40,11 @@ class KeyboardShortcutsModal extends React.Component { KeyboardShortcutsActions.showKeyboardShortcutModal(); }, openShortcutModalConfig.descriptionKey, openShortcutModalConfig.modifiers, true); + /** + * Allow closing the modal with the both Enter and Escape keys + * Both callbacks have the lowest priority (0) to ensure that they are called before any other callbacks + * and configured so that event propagation is stopped after the callback is called (only when the modal is open) + */ const closeShortcutEscapeModalConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE; this.unsubscribeCloseEscapeModal = KeyboardShortcut.subscribe(closeShortcutEscapeModalConfig.shortcutKey, () => { ModalActions.close(); @@ -51,6 +56,17 @@ class KeyboardShortcutsModal extends React.Component { ModalActions.close(); KeyboardShortcutsActions.hideKeyboardShortcutModal(); }, closeShortcutEnterModalConfig.descriptionKey, closeShortcutEnterModalConfig.modifiers, true, () => !this.props.isShortcutsModalOpen); + + /** + * Intercept arrow up and down keys to prevent scrolling ArrowKeyFocusManager while this modal is open + */ + const arrowUpConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_UP; + this.unsubscribeArrowUpKey = KeyboardShortcut.subscribe(arrowUpConfig.shortcutKey, () => { + }, arrowUpConfig.descriptionKey, arrowUpConfig.modifiers, true, () => !this.props.isShortcutsModalOpen); + + const arrowDownConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_DOWN; + this.unsubscribeArrowDownKey = KeyboardShortcut.subscribe(arrowDownConfig.shortcutKey, () => { + }, arrowDownConfig.descriptionKey, arrowDownConfig.modifiers, true, () => !this.props.isShortcutsModalOpen); } componentWillUnmount() { @@ -63,6 +79,12 @@ class KeyboardShortcutsModal extends React.Component { if (this.unsubscribeCloseEnterModal) { this.unsubscribeCloseEnterModal(); } + if (this.unsubscribeArrowUpKey) { + this.unsubscribeArrowUpKey(); + } + if (this.unsubscribeArrowDownKey) { + this.unsubscribeArrowDownKey(); + } } /** From 9792d5b7f1b1d277e9ad70ef757c4f35a035e037 Mon Sep 17 00:00:00 2001 From: azimgd Date: Wed, 3 May 2023 17:03:48 +0500 Subject: [PATCH 5/5] Update comment block at KeyboardShortcutsModal --- src/components/KeyboardShortcutsModal.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/KeyboardShortcutsModal.js b/src/components/KeyboardShortcutsModal.js index 49052937c424..7dd2adf72585 100644 --- a/src/components/KeyboardShortcutsModal.js +++ b/src/components/KeyboardShortcutsModal.js @@ -40,11 +40,9 @@ class KeyboardShortcutsModal extends React.Component { KeyboardShortcutsActions.showKeyboardShortcutModal(); }, openShortcutModalConfig.descriptionKey, openShortcutModalConfig.modifiers, true); - /** - * Allow closing the modal with the both Enter and Escape keys - * Both callbacks have the lowest priority (0) to ensure that they are called before any other callbacks - * and configured so that event propagation is stopped after the callback is called (only when the modal is open) - */ + // Allow closing the modal with the both Enter and Escape keys + // Both callbacks have the lowest priority (0) to ensure that they are called before any other callbacks + // and configured so that event propagation is stopped after the callback is called (only when the modal is open) const closeShortcutEscapeModalConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE; this.unsubscribeCloseEscapeModal = KeyboardShortcut.subscribe(closeShortcutEscapeModalConfig.shortcutKey, () => { ModalActions.close(); @@ -57,9 +55,7 @@ class KeyboardShortcutsModal extends React.Component { KeyboardShortcutsActions.hideKeyboardShortcutModal(); }, closeShortcutEnterModalConfig.descriptionKey, closeShortcutEnterModalConfig.modifiers, true, () => !this.props.isShortcutsModalOpen); - /** - * Intercept arrow up and down keys to prevent scrolling ArrowKeyFocusManager while this modal is open - */ + // Intercept arrow up and down keys to prevent scrolling ArrowKeyFocusManager while this modal is open const arrowUpConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_UP; this.unsubscribeArrowUpKey = KeyboardShortcut.subscribe(arrowUpConfig.shortcutKey, () => { }, arrowUpConfig.descriptionKey, arrowUpConfig.modifiers, true, () => !this.props.isShortcutsModalOpen);