Allow keyboard navigation of single select combobox (elastic#1619)

* Allow keyboard navigation of single select combobox

* changelog

* Guard against invalid activeOptionIndex

* Mark combobox as invalid if it loses focus and search value is present; hide selected item if user has search text entered and is a singleSelection box

* Open combobox options list on search value change

* Allow tabbing off of singleSelection combo boxes when tabbing through form elements

* Fix padding

* Fix combo box not closing when selecting an option

* Update CHANGELOG.md

CHANGELOG.md

@@ -1,6 +1,10 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `6.10.4`.
+**Note: this release is a backport containing changes originally made in `9.0.0`**
+
+**Bug fixes**
+
+- Fixed keyboard navigation and UI of `EuiComboBox` items in single selection mode ([#1619](https://github.com/elastic/eui/pull/1619))
 
 ## [`6.10.4`](https://github.com/elastic/eui/tree/v6.10.4)
 

src/components/combo_box/__snapshots__/combo_box.test.js.snap

@@ -379,7 +379,7 @@ exports[`props singleSelection is rendered 1`] = `
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
     compressed={false}
-    focusedOptionId="htmlid__option-2"
+    focusedOptionId={null}
     fullWidth={false}
     hasSelectedOptions={true}
     inputRef={[Function]}
@@ -421,7 +421,7 @@ exports[`props singleSelection selects existing option when opened 1`] = `
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
     compressed={false}
-    focusedOptionId="htmlid__option-2"
+    focusedOptionId={null}
     fullWidth={false}
     hasSelectedOptions={true}
     inputRef={[Function]}
@@ -451,7 +451,6 @@ exports[`props singleSelection selects existing option when opened 1`] = `
   />
   <EuiPortal>
     <EuiComboBoxOptionsList
-      activeOptionIndex={2}
       areAllOptionsSelected={false}
       data-test-subj=""
       fullWidth={false}
@@ -533,7 +532,6 @@ exports[`props singleSelection selects existing option when opened 1`] = `
       position="bottom"
       rootId={[Function]}
       rowHeight={27}
-      scrollToIndex={2}
       searchValue=""
       selectedOptions={
         Array [

src/components/combo_box/_combo_box.scss

@@ -17,9 +17,9 @@
     @include euiFormControlStyle($includeStates: false, $includeSizes: false);
     @include euiFormControlWithIcon($isIconOptional: true);
     @include euiFormControlSize(auto, $includeAlternates: true);
-    padding: $euiSizeXS;
+    padding: $euiSizeXS $euiSizeS;
     // sass-lint:disable-block mixins-before-declarations
-    @include euiFormControlLayoutPadding(1); /* 2 */ //
+    @include euiFormControlLayoutPadding(1); /* 2 */
 
     display: flex; /* 1 */
 
@@ -28,6 +28,7 @@
     }
 
     &:not(.euiComboBox__inputWrap--noWrap) {
+      padding: $euiSizeXS;
       height: auto;  /* 3 */
       flex-wrap: wrap; /* 1 */
       align-content: flex-start;

src/components/combo_box/combo_box.js

@@ -74,15 +74,9 @@ export class EuiComboBox extends Component {
       isListOpen: false,
       listPosition: 'bottom',
       activeOptionIndex: undefined,
+      hasFocus: false,
     };
 
-    // ensure that the currently selected single option is active if it is in the matchingOptions
-    if (singleSelection && selectedOptions.length === 1) {
-      if (this.state.matchingOptions.includes(selectedOptions[0])) {
-        this.state.activeOptionIndex = this.state.matchingOptions.indexOf(selectedOptions[0]);
-      }
-    }
-
     this.rootId = htmlIdGenerator();
 
     // Refs.
@@ -121,6 +115,12 @@ export class EuiComboBox extends Component {
       return;
     }
 
+    // it's possible that updateListPosition is called when listElement is becoming visible, but isn't yet
+    const listElementBounds = listElement.getBoundingClientRect();
+    if (listElementBounds.width === 0 || listElementBounds.height === 0) {
+      return;
+    }
+
     const comboBoxBounds = this.comboBox.getBoundingClientRect();
 
     const { position, top } = findPopoverPosition({
@@ -186,7 +186,7 @@ export class EuiComboBox extends Component {
   };
 
   hasActiveOption = () => {
-    return this.state.activeOptionIndex != null;
+    return this.state.activeOptionIndex != null && this.state.activeOptionIndex < this.state.matchingOptions.length;
   };
 
   clearActiveOption = () => {
@@ -277,6 +277,7 @@ export class EuiComboBox extends Component {
       this.props.onFocus();
     }
     this.openList();
+    this.setState({ hasFocus: true });
   }
 
   onContainerBlur = (e) => {
@@ -298,6 +299,7 @@ export class EuiComboBox extends Component {
     if (this.props.onBlur) {
       this.props.onBlur();
     }
+    this.setState({ hasFocus: false });
   }
 
   onKeyDown = (e) => {
@@ -424,7 +426,13 @@ export class EuiComboBox extends Component {
     if (this.props.onSearchChange) {
       this.props.onSearchChange(searchValue);
     }
-    this.setState({ searchValue });
+
+    this.setState(
+      { searchValue },
+      () => {
+        if (searchValue && this.state.isListOpen === false) this.openList();
+      }
+    );
   };
 
   comboBoxRef = node => {
@@ -481,21 +489,19 @@ export class EuiComboBox extends Component {
 
   static getDerivedStateFromProps(nextProps, prevState) {
     const { options, selectedOptions, singleSelection } = nextProps;
-    const { searchValue } = prevState;
+    const { activeOptionIndex, searchValue } = prevState;
 
     // Calculate and cache the options which match the searchValue, because we use this information
     // in multiple places and it would be expensive to calculate repeatedly.
     const matchingOptions = getMatchingOptions(options, selectedOptions, searchValue, nextProps.async, singleSelection);
-    // ensure that the currently selected single option is active if it is in the matchingOptions
-    if (singleSelection && selectedOptions.length === 1) {
-      let nextActiveOptionIndex;
-      if (matchingOptions.includes(selectedOptions[0])) {
-        nextActiveOptionIndex = matchingOptions.indexOf(selectedOptions[0]);
-      }
-      return { matchingOptions, activeOptionIndex: nextActiveOptionIndex };
+
+    const stateUpdate = { matchingOptions };
+
+    if (activeOptionIndex >= matchingOptions.length) {
+      stateUpdate.activeOptionIndex = undefined;
     }
 
-    return { matchingOptions };
+    return stateUpdate;
   }
 
   updateMatchingOptionsIfDifferent(newMatchingOptions) {
@@ -573,12 +579,13 @@ export class EuiComboBox extends Component {
       'data-test-subj': dataTestSubj,
       ...rest
     } = this.props;
+    const { hasFocus, searchValue, isListOpen, listPosition, width, activeOptionIndex } = this.state;
 
-    const { searchValue, isListOpen, listPosition, width, activeOptionIndex } = this.state;
+    const markAsInvalid = isInvalid || (hasFocus === false && searchValue);
 
     const classes = classNames('euiComboBox', className, {
       'euiComboBox-isOpen': isListOpen,
-      'euiComboBox-isInvalid': isInvalid,
+      'euiComboBox-isInvalid': markAsInvalid,
       'euiComboBox-isDisabled': isDisabled,
       'euiComboBox--fullWidth': fullWidth,
       'euiComboBox--compressed': compressed,

src/components/combo_box/combo_box_input/_combo_box_pill.scss

@@ -11,7 +11,7 @@
 
     line-height: $euiSizeL;
     font-size: $euiFontSizeS;
-    padding: 0 $euiSizeXS;
+    padding: 0;
     color: $euiTextColor;
     vertical-align: middle;
     display: inline-block;

src/components/combo_box/combo_box_input/combo_box_input.js

@@ -215,7 +215,7 @@ export class EuiComboBoxInput extends Component {
           tabIndex="-1" // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
           data-test-subj="comboBoxInput"
         >
-          {pills}
+          {!singleSelection || !searchValue ? pills : null}
           {placeholderMessage}
           <AutosizeInput
             role="textbox"