[Visual Refresh] Inputs: Add refresh design update #2 #8778

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

mgadewoll merged 10 commits into elastic:feat/inputs-visual-refresh from mgadewoll:input/324-visual-refresh-2

Jun 20, 2025

...s/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

.../reference/chrome_desktop_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

.../eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...s/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_High_Contrast.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...es/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

.../reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...i/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...e/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...s/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...me_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...rence/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...i/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

.../reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...e_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...e_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png

...s/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png

...i/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png

...reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png

...eference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png

.../chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png

...reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png

...erence/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png

...ence/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png

...op_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png

...sktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png

...ontent_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png

...sktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png

...hrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png

...ome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png

...me_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png

...ular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png

..._desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png

...e_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png

...desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png

...sktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png

...sktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png

...hrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png

...op_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png

...bular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png

...loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png

...rence/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png

...Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png

...es/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png

packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png

packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png

...i/reference/chrome_mobile_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png

...s/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png

packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png

...es/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_High_Contrast.png

packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png

....loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png

...ges/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png

packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png

...i/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png

...ki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png

...ce/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png

...es/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png

...obile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png

...ome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png

...erence/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png

.../chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png

.../eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png

.../eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png

.../reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png

...ui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png

...i/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png

....loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png

...me_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png

...es/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png

...ui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png

.../reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png

...reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png

...e/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png

.../reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png

...ference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png

...rence/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png

...le_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png

...obile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png

...ontent_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png

...obile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png

...chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png

...rome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png

...ome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png

...e_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png

...me_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png

..._mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png

...obile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png

...chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png

...le_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png

...bular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png

....loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png

...erence/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png

...Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png

packages/eui/changelogs/upcoming/8778.md

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    - Added new `refresh` design for input styles on form picker components:
+      - `EuiComboBox`
+      - `EuiFilePicker`
+      - `EuiDatePicker`
+      - `EuiSuperDatePicker`
+    - Updated the font size of `xs` size `EuiButtonEmpty` to `14px`

packages/eui/src/components/combo_box/combo_box.spec.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -254,7 +254,7 @@ describe('EuiComboBox', () => { @@
           );
           cy.get('[data-test-subj="comboBoxSearchInput"]')
             .invoke('width')
-            .should('be.eq', 356);
+            .should('be.eq', 352);
         });
       });
@@ Expand Down @@

packages/eui/src/components/combo_box/combo_box_input/combo_box_input.styles.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -8,7 +8,7 @@
  
    import { css } from '@emotion/react';

    import { UseEuiTheme } from '../../../services';

    import { isEuiThemeRefreshVariant, UseEuiTheme } from '../../../services';

    import { logicalCSS } from '../../../global_styling';

    import {

      euiFormControlStyles,

    @@ -18,13 +18,24 @@ import {
  
    export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => {

      const { euiTheme } = euiThemeContext;

      const isRefreshVariant = isEuiThemeRefreshVariant(

        euiThemeContext,

        'formVariant'

      );

      const formStyles = euiFormControlStyles(euiThemeContext);

      return {

        // Wrapper which visually mimics a form control

        euiComboBoxInputWrapper: css`

          ${euiFormControlDefaultShadow(euiThemeContext)}

          display: flex;

          ${isRefreshVariant &&

          `

            &:focus-within {

              ${formStyles.focus}

            }

          `}

        `,

        multiSelect: css`

          flex-wrap: wrap;

    @@ -33,7 +44,10 @@ export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => {
  
          ${formStyles.uncompressed}

          ${logicalCSS('height', 'auto')}

          ${logicalCSS('padding-vertical', euiTheme.size.s)}

          ${logicalCSS('padding-left', euiTheme.size.s)}

          ${logicalCSS(

            'padding-left',

            isRefreshVariant ? euiTheme.size.m : euiTheme.size.s

          )}

          column-gap: ${euiTheme.size.s};

          row-gap: ${euiTheme.size.xs};

        `,

    @@ -60,7 +74,9 @@ export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => {
  
        invalid: css(formStyles.invalid),

        disabled: css(formStyles.disabled),

        open: css(formStyles.focus),

        open: css`

          ${formStyles.focus}

        `,

        inGroup: css(formStyles.inGroup),

        // Actual input element, which has variable width depending on its value

    @@ -75,7 +91,7 @@ export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => {
  
          background: transparent;

          &:disabled {

            color: ${euiTheme.colors.disabledText};

            color: ${euiTheme.colors.textDisabled};

          }

          /* Ensure that no input states are visible on the hidden input */

packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -21,6 +21,8 @@ import {
  
      keys,

      CanvasTextUtils,

      RenderWithEuiStylesMemoizer,

      isEuiThemeRefreshVariant,

      RenderWithEuiTheme,

    } from '../../../services';

    import { EuiScreenReaderOnly } from '../../accessibility';

    import {

    @@ -317,103 +319,122 @@ export class EuiComboBoxInput<T> extends Component<
  
        });

        return (

          <RenderWithEuiStylesMemoizer>

            {(stylesMemoizer) => {

              const styles = stylesMemoizer(euiComboBoxInputStyles);

              const cssStyles = [

                styles.euiComboBoxInputWrapper,

                !singleSelection && styles.multiSelect,

                compressed ? styles.compressed : styles.uncompressed,

                ...(this.asPlainText || showPlaceholder

                  ? [

                      styles.plainText.plainText,

                      compressed

                        ? styles.plainText.compressed

                        : styles.plainText.uncompressed,

                    ]

                  : []),

                isDisabled

                  ? styles.disabled

                  : isInvalid

                  ? styles.invalid

                  : isListOpen

                  ? styles.open

                  : undefined,

                isInGroup && styles.inGroup,

              ];

              const formLayoutStyles = [

                styles.formLayout.euiComboBox__formControlLayout,

                !singleSelection && styles.formLayout.multiSelect,

              ];

              return (

                <EuiFormControlLayout

                  icon={icon}

                  {...clickProps}

                  inputId={id}

                  isLoading={isLoading}

                  isInvalid={isInvalid}

                  isDisabled={isDisabled}

                  compressed={compressed}

                  fullWidth={fullWidth}

                  prepend={prepend}

                  append={append}

                  css={formLayoutStyles}

                >

                  <div

                    css={cssStyles}

                    className={wrapClasses}

                    data-test-subj="comboBoxInput"

                    onClick={onClick}

                    tabIndex={-1} // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div

                  >

                    {this.renderPills()}

                    <EuiComboBoxOptionAppendPrepend

                      option={this.asPlainText ? selectedOptions?.[0] : undefined}

                      classNamePrefix="euiComboBoxPlainTextSelection"

                      marginSize="xxs"

          <RenderWithEuiTheme>

            {(euiThemeContext) => (

              <RenderWithEuiStylesMemoizer>

                {(stylesMemoizer) => {

                  const styles = stylesMemoizer(euiComboBoxInputStyles);

                  const isRefreshVariant = isEuiThemeRefreshVariant(

                    euiThemeContext,

                    'formVariant'

                  );

                  const stateCss = isRefreshVariant

                    ? isListOpen

                      ? styles.open

                      : isInvalid

                      ? styles.invalid

                      : undefined

                    : isInvalid

                    ? styles.invalid

                    : isListOpen

                    ? styles.open

                    : undefined;

                  const cssStyles = [

                    styles.euiComboBoxInputWrapper,

                    !singleSelection && styles.multiSelect,

                    compressed ? styles.compressed : styles.uncompressed,

                    ...(this.asPlainText || showPlaceholder

                      ? [

                          styles.plainText.plainText,

                          compressed

                            ? styles.plainText.compressed

                            : styles.plainText.uncompressed,

                        ]

                      : []),

                    isDisabled ? styles.disabled : stateCss,

                    isInGroup && styles.inGroup,

                  ];

                  const formLayoutStyles = [

                    styles.formLayout.euiComboBox__formControlLayout,

                    !singleSelection && styles.formLayout.multiSelect,

                  ];

                  return (

                    <EuiFormControlLayout

                      icon={icon}

                      {...clickProps}

                      inputId={id}

                      isLoading={isLoading}

                      isInvalid={isInvalid}

                      isDisabled={isDisabled}

                      compressed={compressed}

                      fullWidth={fullWidth}

                      prepend={prepend}

                      append={append}

                      css={formLayoutStyles}

                    >

                      <input

                        aria-activedescendant={focusedOptionId}

                        aria-autocomplete="list"

                        aria-controls={isListOpen ? rootId('listbox') : ''}

                        aria-expanded={isListOpen}

                        aria-label={ariaLabel}

                        aria-labelledby={ariaLabelledby}

                        aria-describedby={ariaDescribedby}

                        aria-invalid={isInvalid}

                        aria-haspopup="listbox"

                        css={styles.euiComboBoxInput}

                        className="euiComboBox__input"

                        data-test-subj="comboBoxSearchInput"

                        disabled={isDisabled}

                        id={id}

                        onBlur={this.onBlur}

                        onChange={(event) => onChange(event.target.value)}

                        onFocus={this.onFocus}

                        onKeyDown={this.onKeyDown}

                        ref={this.inputRefCallback}

                        role="combobox"

                        style={{

                          inlineSize:

                            this.asPlainText || showPlaceholder

                              ? '100%'

                              : this.state.inputWidth,

                        }}

                        placeholder={showPlaceholder ? placeholder : undefined}

                        value={this.searchValue}

                        autoFocus={autoFocus}

                        autoComplete="off"

                        // Force the menu to re-open on every input click - only necessary when plain text

                        onClick={this.asPlainText ? (onFocus as any) : undefined} // Type shenanigans - event should be mostly the same

                      />

                    </EuiComboBoxOptionAppendPrepend>

                    {removeOptionMessage}

                  </div>

                </EuiFormControlLayout>

              );

            }}

          </RenderWithEuiStylesMemoizer>

                      <div

                        css={cssStyles}

                        className={wrapClasses}

                        data-test-subj="comboBoxInput"

                        onClick={onClick}

                        tabIndex={-1} // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div

                      >

                        {this.renderPills()}

                        <EuiComboBoxOptionAppendPrepend

                          option={

                            this.asPlainText ? selectedOptions?.[0] : undefined

                          }

                          classNamePrefix="euiComboBoxPlainTextSelection"

                          marginSize="xxs"

                        >

                          <input

                            aria-activedescendant={focusedOptionId}

                            aria-autocomplete="list"

                            aria-controls={isListOpen ? rootId('listbox') : ''}

                            aria-expanded={isListOpen}

                            aria-label={ariaLabel}

                            aria-labelledby={ariaLabelledby}

                            aria-describedby={ariaDescribedby}

                            aria-invalid={isInvalid}

                            aria-haspopup="listbox"

                            css={styles.euiComboBoxInput}

                            className="euiComboBox__input"

                            data-test-subj="comboBoxSearchInput"

                            disabled={isDisabled}

                            id={id}

                            onBlur={this.onBlur}

                            onChange={(event) => onChange(event.target.value)}

                            onFocus={this.onFocus}

                            onKeyDown={this.onKeyDown}

                            ref={this.inputRefCallback}

                            role="combobox"

                            style={{

                              inlineSize:

                                this.asPlainText || showPlaceholder

                                  ? '100%'

                                  : this.state.inputWidth,

                            }}

                            placeholder={showPlaceholder ? placeholder : undefined}

                            value={this.searchValue}

                            autoFocus={autoFocus}

                            autoComplete="off"

                            // Force the menu to re-open on every input click - only necessary when plain text

                            onClick={

                              this.asPlainText ? (onFocus as any) : undefined

                            } // Type shenanigans - event should be mostly the same

                          />

                        </EuiComboBoxOptionAppendPrepend>

                        {removeOptionMessage}

                      </div>

                    </EuiFormControlLayout>

                  );

                }}

              </RenderWithEuiStylesMemoizer>

            )}

          </RenderWithEuiTheme>

        );

      }

    }