From d73a6e9dbad6fe2a8ffeb5a372253fc37dfdae2a Mon Sep 17 00:00:00 2001
From: Raghavendra Tirumalasetti
 <104980124+RaghavendraTirumalasetti@users.noreply.github.com>
Date: Wed, 24 May 2023 15:54:31 +0530
Subject: [PATCH] Search auto populate results not accessible with tab or
 up/down keys. (#4060)

Co-authored-by: sahil <sahil.kumar.sharma@gds.ey.com>
Co-authored-by: Sahil Kumar Sharma <86670457+Sahilsks@users.noreply.github.com>
Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>
Co-authored-by: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
Co-authored-by: arpit khare <84493875+glo42707@users.noreply.github.com>
---
 .../venia-ui/lib/components/SearchBar/searchBar.js | 14 +++++++-------
 .../lib/components/SearchBar/searchBar.module.css  |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/venia-ui/lib/components/SearchBar/searchBar.js b/packages/venia-ui/lib/components/SearchBar/searchBar.js
index 2174249637..3e1d677474 100644
--- a/packages/venia-ui/lib/components/SearchBar/searchBar.js
+++ b/packages/venia-ui/lib/components/SearchBar/searchBar.js
@@ -35,13 +35,6 @@ const SearchBar = React.forwardRef((props, ref) => {
                     initialValues={initialValues}
                     onSubmit={handleSubmit}
                 >
-                    <div className={classes.autocomplete}>
-                        <Autocomplete
-                            setVisible={setIsAutoCompleteOpen}
-                            valid={valid}
-                            visible={isAutoCompleteOpen}
-                        />
-                    </div>
                     <div className={classes.search}>
                         <SearchField
                             addLabel={formatMessage({
@@ -52,6 +45,13 @@ const SearchBar = React.forwardRef((props, ref) => {
                             onChange={handleChange}
                             onFocus={handleFocus}
                         />
+                        <div className={classes.autocomplete}>
+                            <Autocomplete
+                                setVisible={setIsAutoCompleteOpen}
+                                valid={valid}
+                                visible={isAutoCompleteOpen}
+                            />
+                        </div>
                     </div>
                 </Form>
             </div>
diff --git a/packages/venia-ui/lib/components/SearchBar/searchBar.module.css b/packages/venia-ui/lib/components/SearchBar/searchBar.module.css
index 7bddc04d7f..97da548373 100644
--- a/packages/venia-ui/lib/components/SearchBar/searchBar.module.css
+++ b/packages/venia-ui/lib/components/SearchBar/searchBar.module.css
@@ -46,6 +46,6 @@
 
 .autocomplete {
     composes: grid from global;
-    composes: relative from global;
+    /* composes: relative from global; */
     composes: z-menu from global;
 }