diff --git a/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx b/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx index cac7e3d338b..2f25aa28098 100644 --- a/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx +++ b/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx @@ -32,6 +32,7 @@ import { isWithinBreakpoints, } from '../../../services/breakpoint'; import { EuiSpacer } from '../../spacer'; +import { ENTER } from '../../../services/keys'; export type EuiSelectableTemplateSitewideProps = Partial< Omit, 'options'> @@ -142,21 +143,24 @@ export const EuiSelectableTemplateSitewide: FunctionComponent) => { - searchProps && searchProps.onFocus && searchProps.onFocus(e); - if (canShowPopoverButton) return; - + searchProps?.onFocus?.(e); setPopoverIsOpen(true); }; const onSearchInput = (e: React.FormEvent) => { - searchProps && searchProps.onInput && searchProps.onInput(e); + searchProps?.onInput?.(e); setPopoverIsOpen(true); }; - const searchOnBlur = (e: React.FocusEvent) => { - searchProps && searchProps.onBlur && searchProps.onBlur(e); - if (canShowPopoverButton) return; + const onSearchKeydown = (e: React.KeyboardEvent) => { + searchProps?.onKeyDown?.(e); + if (e.key === ENTER) { + setPopoverIsOpen(true); + } + }; + const searchOnBlur = (e: React.FocusEvent) => { + searchProps?.onBlur?.(e); if (!popoverRef?.contains(e.relatedTarget as HTMLElement)) { setPopoverIsOpen(false); } @@ -235,6 +239,7 @@ export const EuiSelectableTemplateSitewide: FunctionComponent