Prevent combobox from complaining about long search values (#3797)

* Prevent combobox from complaining about long search values * changelog
elastic · Jul 27, 2020 · 1db8ed4 · 1db8ed4
1 parent 915790b
commit 1db8ed4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,10 @@
 
 - Fixed bug in `EuiDataGrid` not calculating the width correctly ([#3789](https://github.com/elastic/eui/pull/3789))
 
+**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
@@ -294,7 +294,13 @@ export class EuiComboBox<T> 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<T> 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
@@ -76,7 +76,7 @@ export type EuiComboBoxOptionsListProps<T> = CommonProps &
     isLoading?: boolean;
     listRef: RefCallback<HTMLDivElement>;
     matchingOptions: Array<EuiComboBoxOptionOption<T>>;
-    onCloseList: () => void;
+    onCloseList: (event: Event) => void;
     onCreateOption?: (
       searchValue: string,
       options: Array<EuiComboBoxOptionOption<T>>
@@ -184,7 +184,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
       event.target &&
       this.listRefInstance.contains(event.target as Node) === false
     ) {
-      this.props.onCloseList();
+      this.props.onCloseList(event);
     }
   };