add focus after search

Signed-off-by: Juan Pablo Garcia Ripa <sarabadu@gmail.com>

add provider to report

Signed-off-by: Juan Pablo Garcia Ripa <sarabadu@gmail.com>

plugins/search/src/components/SearchModal/SearchModal.tsx

@@ -24,6 +24,7 @@ import {
   Grid,
   List,
   Paper,
+  useTheme,
 } from '@material-ui/core';
 import LaunchIcon from '@material-ui/icons/Launch';
 import { makeStyles } from '@material-ui/core/styles';
@@ -33,7 +34,7 @@ import { SearchResult } from '../SearchResult';
 import { SearchContextProvider, useSearch } from '../SearchContext';
 import { SearchResultPager } from '../SearchResultPager';
 import { useRouteRef } from '@backstage/core-plugin-api';
-import { Link } from '@backstage/core-components';
+import { Link, useLayoutContent } from '@backstage/core-components';
 import { rootRouteRef } from '../../plugin';
 
 export interface SearchModalProps {
@@ -60,10 +61,27 @@ export const Modal = ({ open = true, toggleModal }: SearchModalProps) => {
   const getSearchLink = useRouteRef(rootRouteRef);
   const classes = useStyles();
 
-  const { term } = useSearch();
+  const { focusContent } = useLayoutContent();
+  const { transitions } = useTheme();
+  const { term, setTerm } = useSearch();
+  const [value, setValue] = useState<string>(term);
+
+  useEffect(() => {
+    setValue(prevValue => (prevValue !== term ? term : prevValue));
+  }, [term]);
+
+  useDebounce(() => setTerm(value), 500, [value]);
+
+  const handleQuery = (newValue: string) => {
+    setValue(newValue);
+  };
+
+  const handleClear = () => setValue('');
 
   const handleResultClick = () => {
     toggleModal();
+    handleClear();
+    setTimeout(focusContent, transitions.duration.leavingScreen);
   };
 
   const handleKeyPress = () => {
@@ -94,7 +112,13 @@ export const Modal = ({ open = true, toggleModal }: SearchModalProps) => {
           alignItems="center"
         >
           <Grid item>
-            <Link onClick={toggleModal} to={`${getSearchLink()}?query=${term}`}>
+            <Link
+              onClick={() => {
+                toggleModal();
+                setTimeout(focusContent, transitions.duration.leavingScreen);
+              }}
+              to={`${getSearchLink()}?query=${value}`}
+            >
               <span className={classes.viewResultsLink}>View Full Results</span>
               <LaunchIcon color="primary" />
             </Link>

plugins/search/src/components/SidebarSearch/SidebarSearch.tsx

@@ -19,7 +19,10 @@ import { useNavigate } from 'react-router-dom';
 import { rootRouteRef } from '../../plugin';
 
 import { useRouteRef, IconComponent } from '@backstage/core-plugin-api';
-import { SidebarSearchField, useContentRef } from '@backstage/core-components';
+import {
+  SidebarSearchField,
+  useLayoutContent,
+} from '@backstage/core-components';
 
 export type SidebarSearchProps = {
   icon?: IconComponent;
@@ -27,15 +30,15 @@ export type SidebarSearchProps = {
 
 export const SidebarSearch = (props: SidebarSearchProps) => {
   const searchRoute = useRouteRef(rootRouteRef);
-  const contentRef = useContentRef();
+  const { focusContent } = useLayoutContent();
   const navigate = useNavigate();
   const handleSearch = useCallback(
     (query: string): void => {
       const queryString = qs.stringify({ query }, { addQueryPrefix: true });
-      contentRef?.current?.focus();
+      focusContent();
       navigate(`${searchRoute()}${queryString}`);
     },
-    [navigate, searchRoute, contentRef],
+    [focusContent, navigate, searchRoute],
   );
 
   return (