Merge pull request #107 from rvsia/search-focus

Focus search button when menu is opened

Author: Hyperkid123

packages/react-renderer-demo/src/common/examples-nav.js

@@ -13,7 +13,7 @@ import schema from './menu-renderer/schema-demo';
 
 const useStyles = makeStyles(navStyles);
 
-const Navigation = ({ closeNav }) => {
+const Navigation = ({ closeNav, searchRef }) => {
   const classes = useStyles();
 
   return (
@@ -32,7 +32,7 @@ const Navigation = ({ closeNav }) => {
         </ListSubheader>) }
       className={ classes.listRoot }
     >
-      <Menu schema={ schema } />
+      <Menu searchRef={ searchRef } schema={ schema } />
     </List>
   );
 };

packages/react-renderer-demo/src/common/menu-renderer/menu-renderer.js

@@ -132,7 +132,7 @@ const memoizeCurrent = () => {
 const search = memoizeSearch();
 const current = memoizeCurrent();
 
-const Menu = ({ schema }) => {
+const Menu = ({ schema, searchRef }) => {
   const [ value, setValue ] = useState('');
   const classes = useStyles();
   const currentLocation = window.location.pathname.split('/');
@@ -149,6 +149,8 @@ const Menu = ({ schema }) => {
         value={ value }
         onChange={ e => setValue(e.target.value) }
         className={ classes.searchButton }
+        inputRef={ searchRef }
+        autoFocus
       />
       <MenuRenderer schema={ schemaFiltered } />
     </React.Fragment>

packages/react-renderer-demo/src/layout.js

@@ -105,9 +105,11 @@ const useStyles = makeStyles(theme => ({
 const Layout = ({ children, location: { pathname }}) => {
   const classes = useStyles();
   const [ open, setOpen ] = React.useState(false);
+  const searchRef = React.useRef(null);
 
   function handleDrawerOpen() {
     setOpen(true);
+    setTimeout(() => searchRef.current.focus(), 500);
   }
 
   function handleDrawerClose() {
@@ -140,7 +142,7 @@ const Layout = ({ children, location: { pathname }}) => {
             paper: classes.drawerPaper,
           }}
         >
-          <Navigation closeNav={ handleDrawerClose }/>
+          <Navigation searchRef={ searchRef } closeNav={ handleDrawerClose }/>
           <Divider />
         </Drawer>
         <main