diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss index e42df2a9601..47934f3d51b 100644 --- a/src/components/combo_box/_combo_box.scss +++ b/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 */ diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js index cc03a536e1a..058ce141497 100644 --- a/src/components/combo_box/combo_box.js +++ b/src/components/combo_box/combo_box.js @@ -188,7 +188,6 @@ export class EuiComboBox extends Component { this.setState({ activeOptionIndex: nextActiveOptionIndex, }); - this.focusActiveOption(); }; hasActiveOption = () => { @@ -196,7 +195,9 @@ export class EuiComboBox extends Component { }; 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(); + } } } diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_option.scss b/src/components/combo_box/combo_box_options_list/_combo_box_option.scss index dcfc0ae77a8..87adfb7093a 100644 --- a/src/components/combo_box/combo_box_options_list/_combo_box_option.scss +++ b/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 { diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss index 99876d79ab0..8bdef3516fb 100644 --- a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss +++ b/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 { diff --git a/src/components/combo_box/combo_box_options_list/combo_box_option.js b/src/components/combo_box/combo_box_options_list/combo_box_option.js index f8ca3ed15c9..f56eaded9c9 100644 --- a/src/components/combo_box/combo_box_options_list/combo_box_option.js +++ b/src/components/combo_box/combo_box_options_list/combo_box_option.js @@ -18,7 +18,12 @@ export class EuiComboBoxOption extends Component { } onClick = () => { - const { onClick, option } = this.props; + const { onClick, option, disabled } = this.props; + + if (disabled) { + return; + } + onClick(option); }; @@ -26,7 +31,12 @@ export class EuiComboBoxOption extends Component { 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 (