fix for global search due to eui@29.0.0 (#77962)

Fixes a regression in global search due to the EUI upgrade. The search now operates better on mobile screens.
elastic · Sep 21, 2020 · ed46b1b · ed46b1b
1 parent a8fe02a
commit ed46b1b
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/x-pack/plugins/global_search_bar/public/components/search_bar.tsx b/x-pack/plugins/global_search_bar/public/components/search_bar.tsx
@@ -11,6 +11,8 @@ import {
   EuiSelectableTemplateSitewide,
   EuiSelectableTemplateSitewideOption,
   EuiText,
+  EuiIcon,
+  EuiHeaderSectionItemButton,
   EuiSelectableMessage,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -138,6 +140,17 @@ export function SearchBar({ globalSearch, navigateToUrl }: Props) {
     <EuiSelectableTemplateSitewide
       onChange={onChange}
       options={options}
+      popoverButtonBreakpoints={['xs', 's']}
+      popoverButton={
+        <EuiHeaderSectionItemButton
+          aria-label={i18n.translate(
+            'xpack.globalSearchBar.searchBar.mobileSearchButtonAriaLabel',
+            { defaultMessage: 'Site-wide search' }
+          )}
+        >
+          <EuiIcon type="search" size="m" />
+        </EuiHeaderSectionItemButton>
+      }
       searchProps={{
         onKeyUpCapture: (e: React.KeyboardEvent<HTMLInputElement>) =>
           setSearchValue(e.currentTarget.value),