From 886731b5cc524ee1169f9018ba40d03af1f27320 Mon Sep 17 00:00:00 2001
From: Tim Schnell <tim.schnell@elastic.co>
Date: Thu, 7 Sep 2023 15:14:52 -0500
Subject: [PATCH 01/12] fix unified search for long field inputs

---
 .../filters_builder/filter_item/filter_item.styles.ts      | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts b/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts
index 5ca888735f5ad..6ec0ac9ab7058 100644
--- a/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts
+++ b/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts
@@ -22,6 +22,13 @@ export const cursorOrCss = css`
 
 export const fieldAndParamCss = (euiTheme: EuiThemeComputed) => css`
   min-width: calc(${euiTheme.size.xl} * 5);
+  flex-grow: 1;
+  .euiFormRow {
+    max-width: 800px;
+  }
+  &:focus-within {
+    flex-grow: 4;
+  }
 `;
 
 export const operationCss = (euiTheme: EuiThemeComputed) => css`

From 3963550438ec7dda245f96a99a03fd55d299fe94 Mon Sep 17 00:00:00 2001
From: nickofthyme <nicholas.partridge@elastic.co>
Date: Thu, 7 Sep 2023 17:21:18 -0700
Subject: [PATCH 02/12] fix: ref naming, simplification and typings

---
 .../filter_bar/filter_editor/phrase_value_input.tsx | 11 +++--------
 .../filter_editor/phrases_values_input.tsx          | 11 +++--------
 .../filter_editor/truncated_label.test.tsx          |  8 +++-----
 .../filter_bar/filter_editor/truncated_label.tsx    | 13 ++++++-------
 .../filters_builder/filter_item/field_input.tsx     |  6 +++---
 5 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx
index ae87024bb61a9..5c52d26ce8378 100644
--- a/src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx
+++ b/src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx
@@ -31,12 +31,7 @@ const COMBOBOX_PADDINGS = 10;
 const DEFAULT_FONT = '14px Inter';
 
 class PhraseValueInputUI extends PhraseSuggestorUI<PhraseValueInputProps> {
-  comboBoxRef: React.RefObject<HTMLInputElement>;
-
-  constructor(props: PhraseValueInputProps) {
-    super(props);
-    this.comboBoxRef = React.createRef();
-  }
+  comboBoxWrapperRef = React.createRef<HTMLDivElement>();
 
   public render() {
     return (
@@ -69,7 +64,7 @@ class PhraseValueInputUI extends PhraseSuggestorUI<PhraseValueInputProps> {
     const valueAsStr = String(value);
     const options = value ? uniq([valueAsStr, ...suggestions]) : suggestions;
     return (
-      <div ref={this.comboBoxRef}>
+      <div ref={this.comboBoxWrapperRef}>
         <StringComboBox
           isDisabled={this.props.disabled}
           fullWidth={fullWidth}
@@ -98,7 +93,7 @@ class PhraseValueInputUI extends PhraseSuggestorUI<PhraseValueInputProps> {
                   defaultComboboxWidth={DEFAULT_COMBOBOX_WIDTH}
                   defaultFont={DEFAULT_FONT}
                   comboboxPaddings={COMBOBOX_PADDINGS}
-                  comboBoxRef={this.comboBoxRef}
+                  comboBoxWrapperRef={this.comboBoxWrapperRef}
                   label={option.label}
                   search={searchValue}
                 />
diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/phrases_values_input.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/phrases_values_input.tsx
index 336849c4ee65a..b31e6aad7d438 100644
--- a/src/plugins/unified_search/public/filter_bar/filter_editor/phrases_values_input.tsx
+++ b/src/plugins/unified_search/public/filter_bar/filter_editor/phrases_values_input.tsx
@@ -33,12 +33,7 @@ const COMBOBOX_PADDINGS = 20;
 const DEFAULT_FONT = '14px Inter';
 
 class PhrasesValuesInputUI extends PhraseSuggestorUI<PhrasesValuesInputProps> {
-  comboBoxRef: React.RefObject<HTMLInputElement>;
-
-  constructor(props: PhrasesValuesInputProps) {
-    super(props);
-    this.comboBoxRef = React.createRef();
-  }
+  comboBoxWrapperRef = React.createRef<HTMLDivElement>();
 
   public render() {
     const { suggestions } = this.state;
@@ -46,7 +41,7 @@ class PhrasesValuesInputUI extends PhraseSuggestorUI<PhrasesValuesInputProps> {
     const options = values ? uniq([...values, ...suggestions]) : suggestions;
 
     return (
-      <div ref={this.comboBoxRef}>
+      <div ref={this.comboBoxWrapperRef}>
         <StringComboBox
           fullWidth={fullWidth}
           compressed={compressed}
@@ -79,7 +74,7 @@ class PhrasesValuesInputUI extends PhraseSuggestorUI<PhrasesValuesInputProps> {
                   defaultComboboxWidth={DEFAULT_COMBOBOX_WIDTH}
                   defaultFont={DEFAULT_FONT}
                   comboboxPaddings={COMBOBOX_PADDINGS}
-                  comboBoxRef={this.comboBoxRef}
+                  comboBoxWrapperRef={this.comboBoxWrapperRef}
                   label={option.label}
                   search={searchValue}
                 />
diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/truncated_label.test.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/truncated_label.test.tsx
index 47ea4cbf2c0eb..4fdd8433d9096 100644
--- a/src/plugins/unified_search/public/filter_bar/filter_editor/truncated_label.test.tsx
+++ b/src/plugins/unified_search/public/filter_bar/filter_editor/truncated_label.test.tsx
@@ -6,18 +6,16 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import { mount } from 'enzyme';
 import { TruncatedLabel } from './truncated_label';
 
 describe('truncated_label', () => {
-  const defaultProps = {
+  const defaultProps: ComponentProps<typeof TruncatedLabel> = {
     defaultFont: '14px Inter',
-    // jest-canvas-mock mocks measureText as the number of string characters, thats why the width is so low
-    width: 30,
     defaultComboboxWidth: 130,
     comboboxPaddings: 100,
-    comboBoxRef: React.createRef<HTMLInputElement>(),
+    comboBoxWrapperRef: React.createRef<HTMLInputElement>(),
     search: '',
     label: 'example_field',
   };
diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/truncated_label.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/truncated_label.tsx
index 9f268e46d7929..21304ad244edf 100644
--- a/src/plugins/unified_search/public/filter_bar/filter_editor/truncated_label.tsx
+++ b/src/plugins/unified_search/public/filter_bar/filter_editor/truncated_label.tsx
@@ -15,7 +15,7 @@ import { throttle } from 'lodash';
 interface TruncatedLabelProps {
   label: string;
   search: string;
-  comboBoxRef: RefObject<HTMLInputElement>;
+  comboBoxWrapperRef: RefObject<HTMLDivElement | null>;
   defaultFont: string;
   defaultComboboxWidth: number;
   comboboxPaddings: number;
@@ -56,7 +56,7 @@ const truncateLabel = (
 
 export const TruncatedLabel = React.memo(function TruncatedLabel({
   label,
-  comboBoxRef,
+  comboBoxWrapperRef,
   search,
   defaultFont,
   defaultComboboxWidth,
@@ -69,15 +69,14 @@ export const TruncatedLabel = React.memo(function TruncatedLabel({
     width: defaultComboboxWidth - comboboxPaddings,
     font: defaultFont,
   });
-
   const computeStyles = (_e: UIEvent | undefined, shouldRecomputeAll = false) => {
-    if (comboBoxRef.current) {
+    if (comboBoxWrapperRef.current) {
       const current = {
         ...labelProps,
-        width: comboBoxRef.current?.clientWidth - comboboxPaddings,
+        width: comboBoxWrapperRef.current.clientWidth - comboboxPaddings,
       };
       if (shouldRecomputeAll) {
-        current.font = window.getComputedStyle(comboBoxRef.current).font;
+        current.font = window.getComputedStyle(comboBoxWrapperRef.current).font;
       }
       setLabelProps(current);
     }
@@ -88,7 +87,7 @@ export const TruncatedLabel = React.memo(function TruncatedLabel({
   }, 50);
 
   useEffectOnce(() => {
-    if (comboBoxRef.current) {
+    if (comboBoxWrapperRef.current) {
       handleResize(undefined, true);
     }
 
diff --git a/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx b/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx
index 3dceef3ef52c9..3c2ff05d4e13c 100644
--- a/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx
+++ b/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx
@@ -43,7 +43,7 @@ export function FieldInput({ field, dataView, onHandleField }: FieldInputProps)
   const { disabled, suggestionsAbstraction } = useContext(FiltersBuilderContextType);
   const fields = dataView ? getFilterableFields(dataView) : [];
   const id = useGeneratedHtmlId({ prefix: 'fieldInput' });
-  const comboBoxRef = useRef<HTMLInputElement>(null);
+  const comboBoxWrapperRef = useRef<HTMLDivElement | null>(null);
 
   const onFieldChange = useCallback(
     ([selectedField]: DataViewField[]) => {
@@ -80,7 +80,7 @@ export function FieldInput({ field, dataView, onHandleField }: FieldInputProps)
   };
 
   return (
-    <div ref={comboBoxRef}>
+    <div ref={comboBoxWrapperRef}>
       <EuiComboBox
         id={id}
         options={euiOptions}
@@ -105,7 +105,7 @@ export function FieldInput({ field, dataView, onHandleField }: FieldInputProps)
                 defaultComboboxWidth={DEFAULT_COMBOBOX_WIDTH}
                 defaultFont={DEFAULT_FONT}
                 comboboxPaddings={COMBOBOX_PADDINGS}
-                comboBoxRef={comboBoxRef}
+                comboBoxWrapperRef={comboBoxWrapperRef}
                 label={option.label}
                 search={searchValue}
               />

From d20ef3ee580dd55ea6b1d8a9495c8bb5133e0ab7 Mon Sep 17 00:00:00 2001
From: nickofthyme <nicholas.partridge@elastic.co>
Date: Thu, 7 Sep 2023 17:41:58 -0700
Subject: [PATCH 03/12] fix: blur input when selection in made

---
 .../public/filters_builder/filter_item/field_input.tsx   | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx b/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx
index 3c2ff05d4e13c..b2b4e92020009 100644
--- a/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx
+++ b/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx
@@ -44,6 +44,7 @@ export function FieldInput({ field, dataView, onHandleField }: FieldInputProps)
   const fields = dataView ? getFilterableFields(dataView) : [];
   const id = useGeneratedHtmlId({ prefix: 'fieldInput' });
   const comboBoxWrapperRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
   const onFieldChange = useCallback(
     ([selectedField]: DataViewField[]) => {
@@ -77,12 +78,20 @@ export function FieldInput({ field, dataView, onHandleField }: FieldInputProps)
       ({ label }) => fields[optionFields.findIndex((optionField) => optionField.label === label)]
     );
     onFieldChange(newValues);
+
+    setTimeout(() => {
+      // Note: requires a tick skip to correctly blur element focus
+      inputRef?.current?.blur();
+    })
   };
 
   return (
     <div ref={comboBoxWrapperRef}>
       <EuiComboBox
         id={id}
+        inputRef={(ref) => {
+          inputRef.current = ref
+        }}
         options={euiOptions}
         selectedOptions={selectedEuiOptions}
         onChange={onComboBoxChange}

From 61557579d54bec66f3655915a2881a75f4961f7d Mon Sep 17 00:00:00 2001
From: nickofthyme <nicholas.partridge@elastic.co>
Date: Thu, 7 Sep 2023 17:42:48 -0700
Subject: [PATCH 04/12] feat: animate input width changes

---
 .../filters_builder/filter_item/filter_item.styles.ts       | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts b/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts
index 6ec0ac9ab7058..dca3d241fd553 100644
--- a/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts
+++ b/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { EuiThemeComputed } from '@elastic/eui';
+import { EuiThemeComputed, euiCanAnimate } from '@elastic/eui';
 import { css } from '@emotion/css';
 
 import add from '../assets/add.svg';
@@ -29,6 +29,10 @@ export const fieldAndParamCss = (euiTheme: EuiThemeComputed) => css`
   &:focus-within {
     flex-grow: 4;
   }
+
+  ${euiCanAnimate} {
+    transition: flex ${euiTheme.animation.extraFast};
+  }
 `;
 
 export const operationCss = (euiTheme: EuiThemeComputed) => css`

From d910bbf47b4286a21899ef73d618b2b087a5a83b Mon Sep 17 00:00:00 2001
From: nickofthyme <nicholas.partridge@elastic.co>
Date: Thu, 7 Sep 2023 18:11:09 -0700
Subject: [PATCH 05/12] fix: ref type in jest tests

---
 .../public/filter_bar/filter_editor/truncated_label.test.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/truncated_label.test.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/truncated_label.test.tsx
index 4fdd8433d9096..08236041ab93a 100644
--- a/src/plugins/unified_search/public/filter_bar/filter_editor/truncated_label.test.tsx
+++ b/src/plugins/unified_search/public/filter_bar/filter_editor/truncated_label.test.tsx
@@ -15,7 +15,7 @@ describe('truncated_label', () => {
     defaultFont: '14px Inter',
     defaultComboboxWidth: 130,
     comboboxPaddings: 100,
-    comboBoxWrapperRef: React.createRef<HTMLInputElement>(),
+    comboBoxWrapperRef: React.createRef<HTMLDivElement>(),
     search: '',
     label: 'example_field',
   };

From dcd3f372d77b7a3dfa8de5e5ad1120547c05ce1b Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 8 Sep 2023 01:42:58 +0000
Subject: [PATCH 06/12] [CI] Auto-commit changed files from 'node
 scripts/eslint --no-cache --fix'

---
 .../public/filters_builder/filter_item/field_input.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx b/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx
index b2b4e92020009..8a932cb3e8a9c 100644
--- a/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx
+++ b/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx
@@ -82,7 +82,7 @@ export function FieldInput({ field, dataView, onHandleField }: FieldInputProps)
     setTimeout(() => {
       // Note: requires a tick skip to correctly blur element focus
       inputRef?.current?.blur();
-    })
+    });
   };
 
   return (
@@ -90,7 +90,7 @@ export function FieldInput({ field, dataView, onHandleField }: FieldInputProps)
       <EuiComboBox
         id={id}
         inputRef={(ref) => {
-          inputRef.current = ref
+          inputRef.current = ref;
         }}
         options={euiOptions}
         selectedOptions={selectedEuiOptions}

From e8895bfffcd7928dbccbdbae31a5ffc077afb3a0 Mon Sep 17 00:00:00 2001
From: nickofthyme <nicholas.partridge@elastic.co>
Date: Thu, 7 Sep 2023 23:06:52 -0700
Subject: [PATCH 07/12] feat: add blur after single selection

---
 .../filter_bar/filter_editor/generic_combo_box.tsx   |  1 +
 .../filter_bar/filter_editor/phrase_value_input.tsx  | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/generic_combo_box.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/generic_combo_box.tsx
index 04379d34a3946..c82c41ced67c5 100644
--- a/src/plugins/unified_search/public/filter_bar/filter_editor/generic_combo_box.tsx
+++ b/src/plugins/unified_search/public/filter_bar/filter_editor/generic_combo_box.tsx
@@ -20,6 +20,7 @@ export interface GenericComboBoxProps<T> {
     searchValue: string,
     OPTION_CONTENT_CLASSNAME: string
   ) => React.ReactNode;
+  inputRef?: ((instance: HTMLInputElement | null) => void) | undefined
   [propName: string]: any;
 }
 
diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx
index 5c52d26ce8378..5b05598918855 100644
--- a/src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx
+++ b/src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx
@@ -32,6 +32,7 @@ const DEFAULT_FONT = '14px Inter';
 
 class PhraseValueInputUI extends PhraseSuggestorUI<PhraseValueInputProps> {
   comboBoxWrapperRef = React.createRef<HTMLDivElement>();
+  inputRef: HTMLInputElement | null = null;
 
   public render() {
     return (
@@ -66,6 +67,9 @@ class PhraseValueInputUI extends PhraseSuggestorUI<PhraseValueInputProps> {
     return (
       <div ref={this.comboBoxWrapperRef}>
         <StringComboBox
+          inputRef={(ref) => {
+            this.inputRef = ref
+          }}
           isDisabled={this.props.disabled}
           fullWidth={fullWidth}
           compressed={this.props.compressed}
@@ -80,7 +84,13 @@ class PhraseValueInputUI extends PhraseSuggestorUI<PhraseValueInputProps> {
           options={options}
           getLabel={(option) => option}
           selectedOptions={value ? [valueAsStr] : []}
-          onChange={([newValue = '']) => onChange(newValue)}
+          onChange={([newValue = '']) => {
+            onChange(newValue)
+            setTimeout(() => {
+              // Note: requires a tick skip to correctly blur element focus
+              this.inputRef?.blur();
+            })
+          }}
           onSearchChange={this.onSearchChange}
           singleSelection={{ asPlainText: true }}
           onCreateOption={onChange}

From 547a8515691f0d39cab0a423e464a77e698c18f3 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 8 Sep 2023 06:12:26 +0000
Subject: [PATCH 08/12] [CI] Auto-commit changed files from 'node
 scripts/precommit_hook.js --ref HEAD~1..HEAD --fix'

---
 .../public/filter_bar/filter_editor/generic_combo_box.tsx   | 2 +-
 .../public/filter_bar/filter_editor/phrase_value_input.tsx  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/generic_combo_box.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/generic_combo_box.tsx
index c82c41ced67c5..aa941fe395733 100644
--- a/src/plugins/unified_search/public/filter_bar/filter_editor/generic_combo_box.tsx
+++ b/src/plugins/unified_search/public/filter_bar/filter_editor/generic_combo_box.tsx
@@ -20,7 +20,7 @@ export interface GenericComboBoxProps<T> {
     searchValue: string,
     OPTION_CONTENT_CLASSNAME: string
   ) => React.ReactNode;
-  inputRef?: ((instance: HTMLInputElement | null) => void) | undefined
+  inputRef?: ((instance: HTMLInputElement | null) => void) | undefined;
   [propName: string]: any;
 }
 
diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx
index 5b05598918855..0a466c61770ce 100644
--- a/src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx
+++ b/src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx
@@ -68,7 +68,7 @@ class PhraseValueInputUI extends PhraseSuggestorUI<PhraseValueInputProps> {
       <div ref={this.comboBoxWrapperRef}>
         <StringComboBox
           inputRef={(ref) => {
-            this.inputRef = ref
+            this.inputRef = ref;
           }}
           isDisabled={this.props.disabled}
           fullWidth={fullWidth}
@@ -85,11 +85,11 @@ class PhraseValueInputUI extends PhraseSuggestorUI<PhraseValueInputProps> {
           getLabel={(option) => option}
           selectedOptions={value ? [valueAsStr] : []}
           onChange={([newValue = '']) => {
-            onChange(newValue)
+            onChange(newValue);
             setTimeout(() => {
               // Note: requires a tick skip to correctly blur element focus
               this.inputRef?.blur();
-            })
+            });
           }}
           onSearchChange={this.onSearchChange}
           singleSelection={{ asPlainText: true }}

From 11c65d73569bb2e1a0ec0917bd3c4beb25c7284b Mon Sep 17 00:00:00 2001
From: Tim Schnell <tim.schnell@elastic.co>
Date: Fri, 8 Sep 2023 11:28:40 -0500
Subject: [PATCH 09/12] removing animation

---
 .../public/filters_builder/filter_item/filter_item.styles.ts  | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts b/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts
index dca3d241fd553..e6d18f0d71885 100644
--- a/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts
+++ b/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts
@@ -29,10 +29,6 @@ export const fieldAndParamCss = (euiTheme: EuiThemeComputed) => css`
   &:focus-within {
     flex-grow: 4;
   }
-
-  ${euiCanAnimate} {
-    transition: flex ${euiTheme.animation.extraFast};
-  }
 `;
 
 export const operationCss = (euiTheme: EuiThemeComputed) => css`

From 2a7acc32df0b5750287a0f615f75e1567706d5da Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 8 Sep 2023 17:02:46 +0000
Subject: [PATCH 10/12] [CI] Auto-commit changed files from 'node
 scripts/eslint --no-cache --fix'

---
 .../public/filters_builder/filter_item/filter_item.styles.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts b/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts
index e6d18f0d71885..6ec0ac9ab7058 100644
--- a/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts
+++ b/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { EuiThemeComputed, euiCanAnimate } from '@elastic/eui';
+import { EuiThemeComputed } from '@elastic/eui';
 import { css } from '@emotion/css';
 
 import add from '../assets/add.svg';

From 4fc58c5dc5e8990922cc77f524c44949417f68d9 Mon Sep 17 00:00:00 2001
From: nickofthyme <nicholas.partridge@elastic.co>
Date: Fri, 8 Sep 2023 10:20:48 -0700
Subject: [PATCH 11/12] fix: focus state on icon click

---
 .../public/filters_builder/filter_item/field_input.tsx      | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx b/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx
index 8a932cb3e8a9c..7d6a7f3b0153f 100644
--- a/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx
+++ b/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx
@@ -85,6 +85,11 @@ export function FieldInput({ field, dataView, onHandleField }: FieldInputProps)
     });
   };
 
+  const handleFocus: React.FocusEventHandler<HTMLDivElement> = () => {
+    // Force focus on input due to https://github.com/elastic/eui/issues/7170
+    inputRef?.current?.focus();
+  }
+
   return (
     <div ref={comboBoxWrapperRef}>
       <EuiComboBox
@@ -103,6 +108,7 @@ export function FieldInput({ field, dataView, onHandleField }: FieldInputProps)
         isClearable={false}
         compressed
         fullWidth
+        onFocus={handleFocus}
         data-test-subj="filterFieldSuggestionList"
         renderOption={(option, searchValue) => (
           <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>

From ab6a5372c2c894ad46172c232958f0b302cd462d Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 8 Sep 2023 17:34:42 +0000
Subject: [PATCH 12/12] [CI] Auto-commit changed files from 'node
 scripts/precommit_hook.js --ref HEAD~1..HEAD --fix'

---
 .../public/filters_builder/filter_item/field_input.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx b/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx
index 7d6a7f3b0153f..8c3dc65758c29 100644
--- a/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx
+++ b/src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx
@@ -88,7 +88,7 @@ export function FieldInput({ field, dataView, onHandleField }: FieldInputProps)
   const handleFocus: React.FocusEventHandler<HTMLDivElement> = () => {
     // Force focus on input due to https://github.com/elastic/eui/issues/7170
     inputRef?.current?.focus();
-  }
+  };
 
   return (
     <div ref={comboBoxWrapperRef}>