diff --git a/src/components/ArrowKeyFocusManager.js b/src/components/ArrowKeyFocusManager.js index 46cff9371656..84283915aba1 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,14 @@ class ArrowKeyFocusManager extends Component { return; } - let newFocusedIndex = this.props.focusedIndex - 1; + const currentFocusedIndex = this.props.focusedIndex > 0 ? this.props.focusedIndex - 1 : this.props.maxIndex; + let newFocusedIndex = currentFocusedIndex; - // 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; + if (newFocusedIndex === currentFocusedIndex) { // all indexes are disabled + return; // no-op + } } this.props.onFocusedIndexChanged(newFocusedIndex); @@ -45,11 +55,14 @@ class ArrowKeyFocusManager extends Component { return; } - let newFocusedIndex = this.props.focusedIndex + 1; + const currentFocusedIndex = this.props.focusedIndex < this.props.maxIndex ? this.props.focusedIndex + 1 : 0; + let newFocusedIndex = currentFocusedIndex; - // 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; + if (newFocusedIndex === currentFocusedIndex) { // all indexes are disabled + return; // no-op + } } this.props.onFocusedIndexChanged(newFocusedIndex); @@ -72,5 +85,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..f6aa63aecaaa 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,8 +271,9 @@ class BaseOptionsSelector extends Component { ) : ; return ( {} : this.updateFocusedIndex} >