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 62648ae50d26a..1310ad41691c3 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 @@ -82,8 +82,10 @@ class PhraseValueInputUI extends PhraseSuggestorUI { onChange={([newValue = '']) => { onChange(newValue); setTimeout(() => { - // Note: requires a tick skip to correctly blur element focus - this.inputRef?.blur(); + // Note: requires a tick skip to correctly move focus from the input to the combobox toggle + this.comboBoxWrapperRef.current + ?.querySelector('[data-test-subj="comboBoxToggleListButton"]') + ?.focus(); }); }} onSearchChange={this.onSearchChange} 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 540226caef525..eb24b392b8596 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 @@ -74,16 +74,13 @@ export function FieldInput({ field, dataView, onHandleField }: FieldInputProps) onFieldChange(newValues); setTimeout(() => { - // Note: requires a tick skip to correctly blur element focus - inputRef?.current?.blur(); + // Note: requires a tick skip to correctly move focus from the input to the combobox toggle + comboBoxWrapperRef.current + ?.querySelector('[data-test-subj="comboBoxToggleListButton"]') + ?.focus(); }); }; - const handleFocus: React.FocusEventHandler = () => { - // Force focus on input due to https://github.com/elastic/eui/issues/7170 - inputRef?.current?.focus(); - }; - return (
css` .euiFormRow { max-width: 800px; } - &:focus-within { + // Expand the combobox if the dropdown is open or the input has focus + &:has(input[aria-expanded='true'], input:focus) { flex-grow: 4; } + input { + width: 100% !important; // TODO: Remove this once latest EUI upgrade merges + } `; export const operationCss = (euiTheme: EuiThemeComputed) => css` @@ -48,7 +52,7 @@ export const actionButtonCss = (euiTheme: EuiThemeComputed) => css` `; export const disabledDraggableCss = css` - &.euiDraggable .euiDraggable__item.euiDraggable__item--isDisabled { + &.euiDraggable .euiDraggable__item-isDisabled { cursor: unset; } `;