[EuiComboBox] Fix keyboard selection when sortMatchesBy=startsWith

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Fixed bug in `EuiPagination` showing wrong page count when `compressed` prop is true. ([#3827](https://github.com/elastic/eui/pull/3827))
 - Fixed bug in EUI's input field components where their `inputRef` couldn't be a `RefObject` ([#3822](https://github.com/elastic/eui/pull/3822))
 - Moved `react-view` and `html-format` to be `devDependencies` ([#3828](https://github.com/elastic/eui/pull/3828))
+- Fix `EuiComboBox` keyboard selection when `sortMatchesBy=startsWith` ([#3823](https://github.com/elastic/eui/pull/3823))
 
 ## [`27.3.0`](https://github.com/elastic/eui/tree/v27.3.0)
 

src/components/combo_box/combo_box.test.tsx

@@ -358,18 +358,45 @@ describe('behavior', () => {
   });
 
   describe('sortMatchesBy', () => {
-    test('options startsWith', () => {
+    const sortMatchesByOptions = [
+      {
+        label: 'Something is Disabled',
+      },
+      ...options,
+    ];
+    test('options "none"', () => {
       const component = mount<
         EuiComboBox<TitanOption>,
         EuiComboBoxProps<TitanOption>,
         { matchingOptions: TitanOption[] }
-      >(<EuiComboBox options={options} sortMatchesBy="startsWith" />);
+      >(<EuiComboBox options={sortMatchesByOptions} sortMatchesBy="none" />);
 
       findTestSubject(component, 'comboBoxSearchInput').simulate('change', {
-        target: { value: 'e' },
+        target: { value: 'di' },
       });
 
-      expect(component.state('matchingOptions')[0].label).toBe('Enceladus');
+      expect(component.state('matchingOptions')[0].label).toBe(
+        'Something is Disabled'
+      );
+    });
+
+    test('options "startsWith"', () => {
+      const component = mount<
+        EuiComboBox<TitanOption>,
+        EuiComboBoxProps<TitanOption>,
+        { matchingOptions: TitanOption[] }
+      >(
+        <EuiComboBox
+          options={sortMatchesByOptions}
+          sortMatchesBy="startsWith"
+        />
+      );
+
+      findTestSubject(component, 'comboBoxSearchInput').simulate('change', {
+        target: { value: 'di' },
+      });
+
+      expect(component.state('matchingOptions')[0].label).toBe('Dione');
     });
   });
 

src/components/combo_box/combo_box.tsx

@@ -211,7 +211,8 @@ export class EuiComboBox<T> extends Component<
       this.props.selectedOptions,
       initialSearchValue,
       this.props.async,
-      Boolean(this.props.singleSelection)
+      Boolean(this.props.singleSelection),
+      this.props.sortMatchesBy
     ),
     searchValue: initialSearchValue,
     width: 0,
@@ -789,7 +790,12 @@ export class EuiComboBox<T> extends Component<
     nextProps: _EuiComboBoxProps<T>,
     prevState: EuiComboBoxState<T>
   ) {
-    const { options, selectedOptions, singleSelection } = nextProps;
+    const {
+      options,
+      selectedOptions,
+      singleSelection,
+      sortMatchesBy,
+    } = nextProps;
     const { activeOptionIndex, searchValue } = prevState;
 
     // Calculate and cache the options which match the searchValue, because we use this information
@@ -799,7 +805,8 @@ export class EuiComboBox<T> extends Component<
       selectedOptions,
       searchValue,
       nextProps.async,
-      Boolean(singleSelection)
+      Boolean(singleSelection),
+      sortMatchesBy
     );
 
     const stateUpdate: Partial<EuiComboBoxState<T>> = { matchingOptions };
@@ -857,7 +864,12 @@ export class EuiComboBox<T> extends Component<
   };
 
   componentDidUpdate() {
-    const { options, selectedOptions, singleSelection } = this.props;
+    const {
+      options,
+      selectedOptions,
+      singleSelection,
+      sortMatchesBy,
+    } = this.props;
     const { searchValue } = this.state;
 
     // React 16.3 has a bug (fixed in 16.4) where getDerivedStateFromProps
@@ -869,7 +881,8 @@ export class EuiComboBox<T> extends Component<
         selectedOptions,
         searchValue,
         this.props.async,
-        Boolean(singleSelection)
+        Boolean(singleSelection),
+        sortMatchesBy
       )
     );
   }
@@ -918,27 +931,6 @@ export class EuiComboBox<T> extends Component<
       matchingOptions,
     } = this.state;
 
-    let newMatchingOptions = matchingOptions;
-
-    if (sortMatchesBy === 'startsWith') {
-      const refObj: {
-        startWith: Array<EuiComboBoxOptionOption<T>>;
-        others: Array<EuiComboBoxOptionOption<T>>;
-      } = { startWith: [], others: [] };
-
-      newMatchingOptions.forEach(object => {
-        if (
-          object.label
-            .toLowerCase()
-            .startsWith(searchValue.trim().toLowerCase())
-        ) {
-          refObj.startWith.push(object);
-        } else {
-          refObj.others.push(object);
-        }
-      });
-      newMatchingOptions = [...refObj.startWith, ...refObj.others];
-    }
     // Visually indicate the combobox is in an invalid state if it has lost focus but there is text entered in the input.
     // When custom options are disabled and the user leaves the combo box after entering text that does not match any
     // options, this tells the user that they've entered invalid input.
@@ -975,7 +967,7 @@ export class EuiComboBox<T> extends Component<
             fullWidth={fullWidth}
             isLoading={isLoading}
             listRef={this.listRefCallback}
-            matchingOptions={newMatchingOptions}
+            matchingOptions={matchingOptions}
             onCloseList={this.closeList}
             onCreateOption={onCreateOption}
             onOptionClick={this.onOptionClick}

src/components/combo_box/matching_options.test.ts

@@ -108,6 +108,7 @@ interface GetMatchingOptionsTestCase {
   searchValue: string;
   selectedOptions: EuiComboBoxOptionOption[];
   showPrevSelected: boolean;
+  sortMatchesBy: string;
 }
 
 const testCases: GetMatchingOptionsTestCase[] = [
@@ -123,6 +124,7 @@ const testCases: GetMatchingOptionsTestCase[] = [
     isPreFiltered: false,
     showPrevSelected: false,
     expected: [],
+    sortMatchesBy: 'none',
   },
   {
     options,
@@ -139,6 +141,7 @@ const testCases: GetMatchingOptionsTestCase[] = [
       { 'data-test-subj': 'titanOption', label: 'Titan' },
       { label: 'Mimas' },
     ],
+    sortMatchesBy: 'none',
   },
   {
     options,
@@ -152,6 +155,7 @@ const testCases: GetMatchingOptionsTestCase[] = [
     isPreFiltered: false,
     showPrevSelected: true,
     expected: [{ 'data-test-subj': 'saturnOption', label: 'Saturn' }],
+    sortMatchesBy: 'none',
   },
   {
     options,
@@ -169,6 +173,7 @@ const testCases: GetMatchingOptionsTestCase[] = [
       { 'data-test-subj': 'saturnOption', label: 'Saturn' },
       { label: 'Mimas' },
     ],
+    sortMatchesBy: 'none',
   },
 ];
 
@@ -182,7 +187,8 @@ describe('getMatchingOptions', () => {
           testCase.selectedOptions,
           testCase.searchValue,
           testCase.isPreFiltered,
-          testCase.showPrevSelected
+          testCase.showPrevSelected,
+          testCase.sortMatchesBy
         )
       ).toMatchObject(testCase.expected);
     }

src/components/combo_box/matching_options.ts

@@ -87,7 +87,8 @@ export const getMatchingOptions = <T>(
   selectedOptions: Array<EuiComboBoxOptionOption<T>>,
   searchValue: string,
   isPreFiltered: boolean,
-  showPrevSelected: boolean
+  showPrevSelected: boolean,
+  sortMatchesBy: string
 ) => {
   const normalizedSearchValue = searchValue.trim().toLowerCase();
   const matchingOptions: Array<EuiComboBoxOptionOption<T>> = [];
@@ -122,5 +123,22 @@ export const getMatchingOptions = <T>(
       );
     }
   });
+
+  if (sortMatchesBy === 'startsWith') {
+    const refObj: {
+      startWith: Array<EuiComboBoxOptionOption<T>>;
+      others: Array<EuiComboBoxOptionOption<T>>;
+    } = { startWith: [], others: [] };
+
+    matchingOptions.forEach(object => {
+      if (object.label.toLowerCase().startsWith(normalizedSearchValue)) {
+        refObj.startWith.push(object);
+      } else {
+        refObj.others.push(object);
+      }
+    });
+    return [...refObj.startWith, ...refObj.others];
+  }
+
   return matchingOptions;
 };