Fix EuiComboBox activeOptionIndex error (#1695)

* change activeOptionIndex pattern; guard against -1 * #1695 changelog entry
elastic · Mar 7, 2019 · 5d02ff2 · 5d02ff2
1 parent d936781
commit 5d02ff2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
 **Bug fixes**
 
 - Fixed floating point arithmetic bug in `EuiRangeTrack`'s value validation ([#1687](https://github.com/elastic/eui/pull/1687))
+- Fixed `EuiComboBox` `activeOptonIndex` error with empty search results ([#1695](https://github.com/elastic/eui/pull/1695))
 
 ## [`9.0.2`](https://github.com/elastic/eui/tree/v9.0.2)
 

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.js.snap b/src/components/combo_box/__snapshots__/combo_box.test.js.snap
@@ -451,6 +451,7 @@ exports[`props singleSelection selects existing option when opened 1`] = `
   />
   <EuiPortal>
     <EuiComboBoxOptionsList
+      activeOptionIndex={-1}
       areAllOptionsSelected={false}
       data-test-subj=""
       fullWidth={false}
@@ -532,6 +533,7 @@ exports[`props singleSelection selects existing option when opened 1`] = `
       position="bottom"
       rootId={[Function]}
       rowHeight={27}
+      scrollToIndex={-1}
       searchValue=""
       selectedOptions={
         Array [

diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
@@ -73,7 +73,7 @@ export class EuiComboBox extends Component {
       searchValue: initialSearchValue,
       isListOpen: false,
       listPosition: 'bottom',
-      activeOptionIndex: undefined,
+      activeOptionIndex: -1,
       hasFocus: false,
     };
 
@@ -154,7 +154,7 @@ export class EuiComboBox extends Component {
     this.setState(({ activeOptionIndex, matchingOptions }) => {
       let nextActiveOptionIndex;
 
-      if (activeOptionIndex == null) {
+      if (activeOptionIndex < 0) {
         // If this is the beginning of the user's keyboard navigation of the menu, then we'll focus
         // either the first or last item.
         nextActiveOptionIndex = amount < 0 ? matchingOptions.length - 1 : 0;
@@ -186,12 +186,12 @@ export class EuiComboBox extends Component {
   };
 
   hasActiveOption = () => {
-    return this.state.activeOptionIndex != null && this.state.activeOptionIndex < this.state.matchingOptions.length;
+    return this.state.activeOptionIndex > -1 && this.state.activeOptionIndex < this.state.matchingOptions.length;
   };
 
   clearActiveOption = () => {
     this.setState({
-      activeOptionIndex: undefined,
+      activeOptionIndex: -1,
     });
   };
 
@@ -498,7 +498,7 @@ export class EuiComboBox extends Component {
     const stateUpdate = { matchingOptions };
 
     if (activeOptionIndex >= matchingOptions.length) {
-      stateUpdate.activeOptionIndex = undefined;
+      stateUpdate.activeOptionIndex = -1;
     }
 
     return stateUpdate;