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}
>