diff --git a/src/containers/typeaheadContainer.js b/src/containers/typeaheadContainer.js index 39969dfd..1c9a1d52 100644 --- a/src/containers/typeaheadContainer.js +++ b/src/containers/typeaheadContainer.js @@ -51,6 +51,16 @@ function getInitialState(props) { }; } +function skipDisabledOptions(results, activeIndex, keyCode) { + let newActiveIndex = activeIndex; + + while (results[newActiveIndex] && results[newActiveIndex].disabled) { + newActiveIndex += keyCode === UP ? -1 : 1; + } + + return newActiveIndex; +} + function typeaheadContainer(Component) { const Typeahead = contextContainer(Component); @@ -297,15 +307,16 @@ function typeaheadContainer(Component) { activeIndex += e.keyCode === UP ? -1 : 1; // Skip over any disabled options. - while (results[activeIndex] && results[activeIndex].disabled) { - activeIndex += e.keyCode === UP ? -1 : 1; - } + activeIndex = skipDisabledOptions(results, activeIndex, e.keyCode); // If we've reached the end, go back to the beginning or vice-versa. if (activeIndex === results.length) { activeIndex = -1; } else if (activeIndex === -2) { activeIndex = results.length - 1; + + // Skip over any disabled options. + activeIndex = skipDisabledOptions(results, activeIndex, e.keyCode); } this._handleActiveIndexChange(activeIndex); diff --git a/test/components/TypeaheadSpec.js b/test/components/TypeaheadSpec.js index 8d7c0bd2..554c5f52 100644 --- a/test/components/TypeaheadSpec.js +++ b/test/components/TypeaheadSpec.js @@ -314,6 +314,24 @@ describe('', () => { expect(activeItem.text()).to.equal(options[0].name); }); + it( + 'should not highlight disabled option which is the last in the list', + () => { + const options = [ + {name: 'foo'}, + {name: 'bar'}, + {disabled: true, name: 'boo'}, + ]; + + typeahead = mountTypeahead({options}); + focus(typeahead); + + // Cycling back up should skip the last option disabled. + const activeOption = cycleThroughMenuAndGetActiveItem(typeahead, UP); + expect(activeOption.text()).to.equal(options[1].name); + } + ); + describe('pagination behaviors', () => { let maxResults, onPaginate, shownResultsCount;