Search auto populate results not accessible with tab or up/down keys. (#4060)

Co-authored-by: sahil <[email protected]>
Co-authored-by: Sahil Kumar Sharma <[email protected]>
Co-authored-by: Devagouda <[email protected]>
Co-authored-by: Aanchal Pawar <[email protected]>
Co-authored-by: arpit khare <[email protected]>

Author: 5 people

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>

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;
 }