fix(react): initialize highlightedIndex for Downshift (#7776)

* fix(react): initialize highlightedIndex for Downshift

* fix(react): use fallback null for undefined highlightedIndex

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/src/components/MultiSelect/FilterableMultiSelect.js

@@ -182,6 +182,7 @@ export default class FilterableMultiSelect extends React.Component {
       inputValue: '',
       topItems: [],
       inputFocused: false,
+      highlightedIndex: null,
     };
   }
 
@@ -215,11 +216,14 @@ export default class FilterableMultiSelect extends React.Component {
     switch (type) {
       case Downshift.stateChangeTypes.keyDownArrowUp:
       case Downshift.stateChangeTypes.itemMouseEnter:
-        this.setState({ highlightedIndex: changes.highlightedIndex });
+        // Sometimes, `changes.highlightedIndex` can be undefined.
+        // This causes Downshift to think we are switching from controlled to
+        // uncontrolled
+        this.setState({ highlightedIndex: changes.highlightedIndex || null });
         break;
       case Downshift.stateChangeTypes.keyDownArrowDown:
         this.setState({
-          highlightedIndex: changes.highlightedIndex,
+          highlightedIndex: changes.highlightedIndex || null,
         });
         if (!this.state.isOpen) {
           this.handleOnMenuChange(true);

packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap

@@ -61,6 +61,7 @@ exports[`MultiSelect.Filterable should render 1`] = `
         defaultIsOpen={false}
         environment={[Window]}
         getA11yStatusMessage={[Function]}
+        highlightedIndex={null}
         id="test-filterable-multiselect"
         inputValue=""
         isOpen={false}