diff --git a/CHANGELOG.md b/CHANGELOG.md index 3da36124c60..b9069bd6771 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,10 @@ - Updated lodash to `v4.17.19` ([#3764](https://github.com/elastic/eui/pull/3764)) - Added `returnKey` glyph to `EuiIcon` ([#3783](https://github.com/elastic/eui/pull/3783)) +**Bug fixes** + +- Fixed `EuiComboBox` marking some very long inputs as invalid ([#3797](https://github.com/elastic/eui/pull/3797)) + ## [`27.2.0`](https://github.com/elastic/eui/tree/v27.2.0) - Added `analyzeEvent` glyph in `EuiIcon` ([#3729](https://github.com/elastic/eui/pull/3729)) diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx index d964e7ccdb0..9ab682c9061 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -294,7 +294,13 @@ export class EuiComboBox extends Component< }); }; - closeList = () => { + closeList = (event?: Event) => { + if (event && event.target === this.searchInputRefInstance) { + // really long search values / custom entries triggers a scroll event on the input + // which the EuiComboBoxOptionsList passes through here + return; + } + this.clearActiveOption(); this.setState({ listZIndex: undefined, @@ -674,7 +680,7 @@ export class EuiComboBox extends Component< } if (singleSelection) { - requestAnimationFrame(this.closeList); + requestAnimationFrame(() => this.closeList()); } else { this.setState({ activeOptionIndex: this.state.matchingOptions.indexOf(addedOption), diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx index c12be6f3946..bb356a1f940 100644 --- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx +++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx @@ -75,7 +75,7 @@ export type EuiComboBoxOptionsListProps = CommonProps & isLoading?: boolean; listRef: RefCallback; matchingOptions: Array>; - onCloseList: () => void; + onCloseList: (event: Event) => void; onCreateOption?: ( searchValue: string, options: Array> @@ -174,7 +174,7 @@ export class EuiComboBoxOptionsList extends Component< event.target && this.listRefInstance.contains(event.target as Node) === false ) { - this.props.onCloseList(); + this.props.onCloseList(event); } };