From 4537b2522854431f67732c9cbddd9ce5bffbc958 Mon Sep 17 00:00:00 2001
From: Sergei Zhernosek <siarhei.zharnasek@gmail.com>
Date: Fri, 1 Feb 2019 09:31:51 +0300
Subject: [PATCH] Fix highlighting of the last option when it's disabled (#414)

---
 src/containers/typeaheadContainer.js | 17 ++++++++++++++---
 test/components/TypeaheadSpec.js     | 18 ++++++++++++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)

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('<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;