From ed46b1b535972d6226f356082d1e5c7185cf6dcc Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Mon, 21 Sep 2020 12:01:56 -0700
Subject: [PATCH] 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.
---
 .../public/components/search_bar.tsx                | 13 +++++++++++++
 1 file changed, 13 insertions(+)

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
index e41f9243198ad9..54066cee414d80 100644
--- 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),