Fix highlighting of the last option when it's disabled (#414)

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);

test/components/TypeaheadSpec.js

@@ -314,6 +314,24 @@ describe('<Typeahead>', () => {
     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;