fix(client):make menu bar disappear after user chooses item from it on landing page (freeCodeCamp#43458)

* removed serachBarRef

* removed serachBarRef

* Revert "removed serachBarRef"

This reverts commit 6a5c2f4.

* Revert "removed serachBarRef"

This reverts commit 67710b3.

* added innerRef as ref to SearchBarOptimized component

* Update client/src/components/Header/index.tsx

Co-authored-by: Oliver Eyton-Williams <[email protected]>

* Update client/src/components/search/searchBar/search-bar-optimized.tsx

Co-authored-by: Oliver Eyton-Williams <[email protected]>

* Update client/src/components/search/searchBar/search-bar-optimized.tsx

Co-authored-by: Oliver Eyton-Williams <[email protected]>

Co-authored-by: Oliver Eyton-Williams <[email protected]>

Author: NoorFakhry

client/src/components/Header/components/universal-nav.tsx

@@ -37,7 +37,7 @@ export const UniversalNav = ({
 
   const search =
     typeof window !== `undefined` && isLanding(window.location.pathname) ? (
-      <SearchBarOptimized />
+      <SearchBarOptimized innerRef={searchBarRef} />
     ) : (
       <SearchBar innerRef={searchBarRef} />
     );

client/src/components/Header/index.tsx

@@ -44,6 +44,8 @@ export class Header extends React.Component<
       this.state.displayMenu &&
       this.menuButtonRef.current &&
       !this.menuButtonRef.current.contains(event.target) &&
+      // since the search bar is part of the menu on small screens, clicks on
+      // the search bar should not toggle the menu
       this.searchBarRef.current &&
       !this.searchBarRef.current.contains(event.target)
     ) {

client/src/components/search/searchBar/search-bar-optimized.tsx

@@ -3,7 +3,11 @@ import { useTranslation } from 'react-i18next';
 import Magnifier from '../../../assets/icons/Magnifier';
 import { searchPageUrl } from '../../../utils/algolia-locale-setup';
 
-const SearchBarOptimized = (): JSX.Element => {
+type Props = {
+  innerRef?: React.RefObject<HTMLDivElement>;
+};
+
+const SearchBarOptimized = ({ innerRef }: Props): JSX.Element => {
   const { t } = useTranslation();
   const placeholder = t('search.placeholder');
   const searchUrl = searchPageUrl;
@@ -18,7 +22,7 @@ const SearchBarOptimized = (): JSX.Element => {
   };
 
   return (
-    <div className='fcc_searchBar' data-testid='fcc_searchBar'>
+    <div className='fcc_searchBar' data-testid='fcc_searchBar' ref={innerRef}>
       <div className='fcc_search_wrapper'>
         <div className='ais-SearchBox' data-cy='ais-SearchBox'>
           <form