From 0a220e3fd8f0f2aebb3f3c9796ca5265a147ba03 Mon Sep 17 00:00:00 2001 From: vladnobenladen Date: Wed, 17 Aug 2022 23:29:43 -0600 Subject: [PATCH 1/5] fix "Split bill- Own contact gets highlighted when you press down arrow and the highlight goes out of the screen when press down arrow" --- src/components/ArrowKeyFocusManager.js | 22 ++++++++++++------- .../OptionsSelector/BaseOptionsSelector.js | 7 ++++++ 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/components/ArrowKeyFocusManager.js b/src/components/ArrowKeyFocusManager.js index dcb915d46bcd..26c22488777b 100644 --- a/src/components/ArrowKeyFocusManager.js +++ b/src/components/ArrowKeyFocusManager.js @@ -10,6 +10,9 @@ const propTypes = { PropTypes.node, ]).isRequired, + /** Array of disabled indexes. */ + disabledIndexes: PropTypes.arrayOf(PropTypes.number), + /** The current focused index. */ focusedIndex: PropTypes.number.isRequired, @@ -20,6 +23,10 @@ const propTypes = { onFocusedIndexChanged: PropTypes.func.isRequired, }; +const defaultProps = { + disabledIndexes: [], +}; + class ArrowKeyFocusManager extends Component { componentDidMount() { const arrowUpConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_UP; @@ -30,11 +37,10 @@ class ArrowKeyFocusManager extends Component { return; } - let newFocusedIndex = this.props.focusedIndex - 1; + let newFocusedIndex = this.props.focusedIndex > 0 ? this.props.focusedIndex - 1 : this.props.maxIndex; - // Wrap around to the bottom of the list - if (newFocusedIndex < 0) { - newFocusedIndex = this.props.maxIndex; + while (this.props.disabledIndexes.includes(newFocusedIndex)) { + newFocusedIndex = newFocusedIndex > 0 ? newFocusedIndex - 1 : this.props.maxIndex; } this.props.onFocusedIndexChanged(newFocusedIndex); @@ -45,11 +51,10 @@ class ArrowKeyFocusManager extends Component { return; } - let newFocusedIndex = this.props.focusedIndex + 1; + let newFocusedIndex = this.props.focusedIndex < this.props.maxIndex ? this.props.focusedIndex + 1 : 0; - // Wrap around to the top of the list - if (newFocusedIndex > this.props.maxIndex) { - newFocusedIndex = 0; + while (this.props.disabledIndexes.includes(newFocusedIndex)) { + newFocusedIndex = newFocusedIndex < this.props.maxIndex ? newFocusedIndex + 1 : 0; } this.props.onFocusedIndexChanged(newFocusedIndex); @@ -72,5 +77,6 @@ class ArrowKeyFocusManager extends Component { } ArrowKeyFocusManager.propTypes = propTypes; +ArrowKeyFocusManager.defaultProps = defaultProps; export default ArrowKeyFocusManager; diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index ec2588185de6..0cdf65518bbf 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -144,6 +144,8 @@ class BaseOptionsSelector extends Component { */ flattenSections() { const allOptions = []; + this.disabledOptionsIndexes = []; + let index = 0; _.each(this.props.sections, (section, sectionIndex) => { _.each(section.data, (option, optionIndex) => { allOptions.push({ @@ -151,6 +153,10 @@ class BaseOptionsSelector extends Component { sectionIndex, index: optionIndex, }); + if (section.isDisabled || option.isDisabled) { + this.disabledOptionsIndexes.push(index); + } + index += 1; }); }); return allOptions; @@ -265,6 +271,7 @@ class BaseOptionsSelector extends Component { ) : ; return ( {} : this.updateFocusedIndex} From 704d6548269a0aea2ad204da3248b3ad8f80f3f0 Mon Sep 17 00:00:00 2001 From: vladnobenladen Date: Mon, 22 Aug 2022 05:22:29 -0600 Subject: [PATCH 2/5] fix "highlight goes out of screen when press down arrow" --- src/components/OptionsSelector/BaseOptionsSelector.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 0cdf65518bbf..f6aa63aecaaa 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -273,7 +273,7 @@ class BaseOptionsSelector extends Component { {} : this.updateFocusedIndex} > From 342481d97c0bb674430c504c758c78fad0dd34f0 Mon Sep 17 00:00:00 2001 From: vladnobenladen Date: Tue, 23 Aug 2022 12:59:05 -0600 Subject: [PATCH 3/5] handle case of all options are disabled --- src/components/ArrowKeyFocusManager.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/ArrowKeyFocusManager.js b/src/components/ArrowKeyFocusManager.js index 26c22488777b..5e411fd075bd 100644 --- a/src/components/ArrowKeyFocusManager.js +++ b/src/components/ArrowKeyFocusManager.js @@ -37,10 +37,14 @@ class ArrowKeyFocusManager extends Component { return; } - let newFocusedIndex = this.props.focusedIndex > 0 ? this.props.focusedIndex - 1 : this.props.maxIndex; + const currentFocusedIndex = this.props.focusedIndex > 0 ? this.props.focusedIndex - 1 : this.props.maxIndex; + let newFocusedIndex = currentFocusedIndex; while (this.props.disabledIndexes.includes(newFocusedIndex)) { newFocusedIndex = newFocusedIndex > 0 ? newFocusedIndex - 1 : this.props.maxIndex; + if (newFocusedIndex === currentFocusedIndex) { // all indexes are disabled + return; // no-op + } } this.props.onFocusedIndexChanged(newFocusedIndex); @@ -51,10 +55,14 @@ class ArrowKeyFocusManager extends Component { return; } - let newFocusedIndex = this.props.focusedIndex < this.props.maxIndex ? this.props.focusedIndex + 1 : 0; + const currentFocusedIndex = this.props.focusedIndex < this.props.maxIndex ? this.props.focusedIndex + 1 : 0; + let newFocusedIndex = currentFocusedIndex; while (this.props.disabledIndexes.includes(newFocusedIndex)) { newFocusedIndex = newFocusedIndex < this.props.maxIndex ? newFocusedIndex + 1 : 0; + if (newFocusedIndex === currentFocusedIndex) { // all indexes are disabled + return; // no-op + } } this.props.onFocusedIndexChanged(newFocusedIndex); From d44c976c99530797e3816cb51d4ee39157efb889 Mon Sep 17 00:00:00 2001 From: vladnobenladen Date: Wed, 24 Aug 2022 22:58:38 -0600 Subject: [PATCH 4/5] handle case of single option --- src/components/ArrowKeyFocusManager.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/ArrowKeyFocusManager.js b/src/components/ArrowKeyFocusManager.js index 5e411fd075bd..98d777f38f35 100644 --- a/src/components/ArrowKeyFocusManager.js +++ b/src/components/ArrowKeyFocusManager.js @@ -33,10 +33,6 @@ class ArrowKeyFocusManager extends Component { const arrowDownConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_DOWN; this.unsubscribeArrowUpKey = KeyboardShortcut.subscribe(arrowUpConfig.shortcutKey, () => { - if (this.props.maxIndex < 1) { - return; - } - const currentFocusedIndex = this.props.focusedIndex > 0 ? this.props.focusedIndex - 1 : this.props.maxIndex; let newFocusedIndex = currentFocusedIndex; @@ -51,10 +47,6 @@ class ArrowKeyFocusManager extends Component { }, arrowUpConfig.descriptionKey, arrowUpConfig.modifiers, true); this.unsubscribeArrowDownKey = KeyboardShortcut.subscribe(arrowDownConfig.shortcutKey, () => { - if (this.props.maxIndex < 1) { - return; - } - const currentFocusedIndex = this.props.focusedIndex < this.props.maxIndex ? this.props.focusedIndex + 1 : 0; let newFocusedIndex = currentFocusedIndex; From 4eae63c7e62b2cca48f0c306869840876b2f14e6 Mon Sep 17 00:00:00 2001 From: vladnobenladen Date: Tue, 30 Aug 2022 21:49:52 -0600 Subject: [PATCH 5/5] add back "maxIndex" check --- src/components/ArrowKeyFocusManager.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/ArrowKeyFocusManager.js b/src/components/ArrowKeyFocusManager.js index 98d777f38f35..84283915aba1 100644 --- a/src/components/ArrowKeyFocusManager.js +++ b/src/components/ArrowKeyFocusManager.js @@ -33,6 +33,10 @@ class ArrowKeyFocusManager extends Component { const arrowDownConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_DOWN; this.unsubscribeArrowUpKey = KeyboardShortcut.subscribe(arrowUpConfig.shortcutKey, () => { + if (this.props.maxIndex < 0) { + return; + } + const currentFocusedIndex = this.props.focusedIndex > 0 ? this.props.focusedIndex - 1 : this.props.maxIndex; let newFocusedIndex = currentFocusedIndex; @@ -47,6 +51,10 @@ class ArrowKeyFocusManager extends Component { }, arrowUpConfig.descriptionKey, arrowUpConfig.modifiers, true); this.unsubscribeArrowDownKey = KeyboardShortcut.subscribe(arrowDownConfig.shortcutKey, () => { + if (this.props.maxIndex < 0) { + return; + } + const currentFocusedIndex = this.props.focusedIndex < this.props.maxIndex ? this.props.focusedIndex + 1 : 0; let newFocusedIndex = currentFocusedIndex;