diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/SelectableUrlList.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/SelectableUrlList.tsx index 37fc1eb5b240a..17195691ce028 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/SelectableUrlList.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/SelectableUrlList.tsx @@ -27,7 +27,6 @@ import { EuiIcon, EuiBadge, EuiButtonIcon, - EuiOutsideClickDetector, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; @@ -100,9 +99,6 @@ export function SelectableUrlList({ onTermChange(); onApply(); setPopoverIsOpen(false); - if (searchRef) { - searchRef.blur(); - } } }; @@ -120,15 +116,11 @@ export function SelectableUrlList({ const closePopover = () => { setPopoverIsOpen(false); - if (searchRef) { - searchRef.blur(); - } }; // @ts-ignore - not sure, why it's not working useEvent('keydown', onEnterKey, searchRef); useEvent('escape', () => setPopoverIsOpen(false), searchRef); - useEvent('blur', () => setPopoverIsOpen(false), searchRef); useEffect(() => { if (searchRef && initialValue) { @@ -207,65 +199,63 @@ export function SelectableUrlList({ allowExclusions={true} > {(list, search) => ( - closePopover()}> - +
-
- - {searchValue && ( - - - {searchValue}, - icon: ( - - Enter - - ), - }} - /> - - - )} - {list} - - - - { - onTermChange(); - onApply(); - closePopover(); - }} - > - {i18n.translate('xpack.apm.apply.label', { - defaultMessage: 'Apply', - })} - - - - -
- - + + {searchValue && ( + + + {searchValue}, + icon: ( + + Enter + + ), + }} + /> + + + )} + {list} + + + + { + onTermChange(); + onApply(); + closePopover(); + }} + > + {i18n.translate('xpack.apm.apply.label', { + defaultMessage: 'Apply', + })} + + + + +
+
)} );