Combo box focus state and text overflow

src/components/combo_box/_combo_box.scss

@@ -26,10 +26,12 @@
    * 2. Force input height to expand tp fill this element.
    * 3. Reset appearance on Safari.
    * 4. Fix react-input-autosize appearance.
+   * 5. Prevent a lot of input from causing the react-input-autosize to overflow the container.
    */
   .euiComboBox__input {
     display: inline-flex !important; /* 1 */
     height: 32px; /* 2 */
+    overflow: hidden; /* 5 */
 
     > input {
       appearance: none; /* 3 */

src/components/combo_box/combo_box.js

@@ -188,15 +188,16 @@ export class EuiComboBox extends Component {
     this.setState({
       activeOptionIndex: nextActiveOptionIndex,
     });
-    this.focusActiveOption();
   };
 
   hasActiveOption = () => {
     return this.state.activeOptionIndex !== undefined;
   };
 
   clearActiveOption = () => {
-    this.state.activeOptionIndex = undefined;
+    this.setState({
+      activeOptionIndex: undefined,
+    });
   };
 
   focusActiveOption = () => {
@@ -381,6 +382,8 @@ export class EuiComboBox extends Component {
   onComboBoxClick = () => {
     // When the user clicks anywhere on the box, enter the interaction state.
     this.searchInput.focus();
+    // If the user does this from a state in which an option has focus, then we need to clear it.
+    this.clearActiveOption();
   };
 
   onComboBoxFocus = (e) => {
@@ -459,7 +462,10 @@ export class EuiComboBox extends Component {
     this.matchingOptions = matchingOptions;
 
     if (!matchingOptions.length) {
-      this.clearActiveOption();
+      // Prevent endless setState -> componentWillUpdate -> setState loop.
+      if (nextState.hasActiveOption) {
+        this.clearActiveOption();
+      }
     }
   }
 

src/components/combo_box/combo_box_options_list/_combo_box_option.scss

@@ -11,12 +11,14 @@
   &:hover {
     text-decoration: underline;
   }
+
   &:focus {
     cursor: pointer;
     color: $euiColorPrimary;
     background-color: $euiFocusBackgroundColor;
   }
-  &:disabled {
+
+  &.euiComboBoxOption-isDisabled {
     color: $euiColorMediumShade;
     cursor: not-allowed;
     &:hover {

src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss

@@ -27,10 +27,14 @@
   box-shadow: none !important;
 }
 
+  /**
+   * 1. Prevent really long input from overflowing the container.
+   */
   .euiComboBoxOptionsList__empty {
     padding: $euiSizeS;
     text-align: center;
     color: $euiColorDarkShade;
+    word-wrap: break-word; /* 1 */
   }
 
   .euiComboBoxOptionsList__rowWrap {

src/components/combo_box/combo_box_options_list/combo_box_option.js

@@ -18,15 +18,25 @@ export class EuiComboBoxOption extends Component {
   }
 
   onClick = () => {
-    const { onClick, option } = this.props;
+    const { onClick, option, disabled } = this.props;
+
+    if (disabled) {
+      return;
+    }
+
     onClick(option);
   };
 
   onKeyDown = (e) => {
     if (e.keyCode === ENTER || e.keyCode === SPACE) {
       e.preventDefault();
       e.stopPropagation();
-      const { onEnterKey, option } = this.props;
+      const { onEnterKey, option, disabled } = this.props;
+
+      if (disabled) {
+        return;
+      }
+
       onEnterKey(option);
     }
   };
@@ -45,7 +55,10 @@ export class EuiComboBoxOption extends Component {
 
     const classes = classNames(
       'euiComboBoxOption',
-      className
+      className,
+      {
+        'euiComboBoxOption-isDisabled': disabled,
+      },
     );
 
     const {
@@ -55,12 +68,13 @@ export class EuiComboBoxOption extends Component {
     return (
       <button
         role="option"
+        type="button"
         className={classes}
         onClick={this.onClick}
         onKeyDown={this.onKeyDown}
         ref={optionRef}
         tabIndex="-1"
-        disabled={disabled}
+        aria-disabled={disabled}
         title={label}
         {...rest}
       >