Merge pull request #15759 from backstage/search/fix-modal-input-focus

[Search] Fix modal input focus

packages/app/src/components/search/SearchModal.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { KeyboardEvent, useRef, useCallback, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   DialogActions,
   DialogContent,
@@ -74,29 +75,48 @@ const useStyles = makeStyles(theme => ({
   viewResultsLink: { verticalAlign: '0.5em' },
 }));
 
+const rootRouteRef = searchPlugin.routes.root;
+
 export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
-  const getSearchLink = useRouteRef(searchPlugin.routes.root);
   const classes = useStyles();
+  const navigate = useNavigate();
+  const { transitions } = useTheme();
+  const { focusContent } = useContent();
 
   const catalogApi = useApi(catalogApiRef);
-  const { term, types } = useSearch();
-  const { focusContent } = useContent();
-  const { transitions } = useTheme();
 
-  const handleResultClick = () => {
+  const { term, types } = useSearch();
+  const searchBarRef = useRef<HTMLInputElement | null>(null);
+  const searchPagePath = `${useRouteRef(rootRouteRef)()}?query=${term}`;
+
+  useEffect(() => {
+    searchBarRef?.current?.focus();
+  });
+
+  const handleSearchResulClick = useCallback(() => {
     toggleModal();
     setTimeout(focusContent, transitions.duration.leavingScreen);
-  };
+  }, [toggleModal, focusContent, transitions]);
 
-  const handleKeyPress = () => {
-    handleResultClick();
-  };
+  const handleSearchBarKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      if (e.key === 'Enter') {
+        navigate(searchPagePath);
+        toggleModal();
+      }
+    },
+    [navigate, toggleModal, searchPagePath],
+  );
 
   return (
     <>
       <DialogTitle>
         <Paper className={classes.container}>
-          <SearchBar className={classes.input} />
+          <SearchBar
+            className={classes.input}
+            inputProps={{ ref: searchBarRef }}
+            onKeyDown={handleSearchBarKeyDown}
+          />
         </Paper>
       </DialogTitle>
       <DialogContent>
@@ -169,16 +189,7 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
               alignItems="center"
             >
               <Grid item>
-                <Link
-                  onClick={() => {
-                    toggleModal();
-                    setTimeout(
-                      focusContent,
-                      transitions.duration.leavingScreen,
-                    );
-                  }}
-                  to={`${getSearchLink()}?query=${term}`}
-                >
+                <Link to={searchPagePath} onClick={handleSearchResulClick}>
                   <Typography
                     component="span"
                     className={classes.viewResultsLink}
@@ -245,8 +256,8 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
                         role="button"
                         tabIndex={0}
                         key={`${document.location}-btn`}
-                        onClick={handleResultClick}
-                        onKeyPress={handleKeyPress}
+                        onClick={handleSearchResulClick}
+                        onKeyDown={handleSearchResulClick}
                       >
                         {resultItem}
                       </div>