refactor(client): Refactor menu to use refs (#37047)

* Refactor menu to use refs #37025

* Fix Header tests #37025

* Removing unneeded forwardRefs #37025

client/src/components/Header/Header.test.js

@@ -41,5 +41,6 @@ describe('<NavLinks />', () => {
 const UniversalNavProps = {
   displayMenu: false,
   menuButtonRef: {},
+  searchBarRef: {},
   toggleDisplayMenu: function() {}
 };

client/src/components/Header/components/MenuButton.js

@@ -1,25 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const MenuButton = React.forwardRef((props, ref) => {
-  return (
+const MenuButton = props => (
   <button
     aria-expanded={props.displayMenu}
     className={
       'toggle-button-nav' + (props.displayMenu ? ' reverse-toggle-color' : '')
     }
     onClick={props.onClick}
-      ref={ref}
+    ref={props.innerRef}
   >
     Menu
   </button>
-  );
-});
+);
 
 MenuButton.displayName = 'MenuButton';
 MenuButton.propTypes = {
   className: PropTypes.string,
   displayMenu: PropTypes.bool.isRequired,
+  innerRef: PropTypes.object,
   onClick: PropTypes.func.isRequired
 };
 

client/src/components/Header/components/UniversalNav.js

@@ -8,18 +8,20 @@ import MenuButton from './MenuButton';
 import NavLinks from './NavLinks';
 import './universalNav.css';
 
-export const UniversalNav = React.forwardRef(
-  ({ displayMenu, toggleDisplayMenu }, ref) => (
+export const UniversalNav = ({
+  displayMenu,
+  toggleDisplayMenu,
+  menuButtonRef,
+  searchBarRef
+}) => (
   <nav
-      className={
-        'universal-nav nav-padding' + (displayMenu ? ' expand-nav' : '')
-      }
+    className={'universal-nav nav-padding' + (displayMenu ? ' expand-nav' : '')}
     id='universal-nav'
   >
     <div
       className={'universal-nav-left' + (displayMenu ? ' display-flex' : '')}
     >
-        <SearchBar />
+      <SearchBar innerRef={searchBarRef} />
     </div>
     <div className='universal-nav-middle'>
       <Link id='universal-nav-logo' to='/'>
@@ -31,11 +33,10 @@ export const UniversalNav = React.forwardRef(
     </div>
     <MenuButton
       displayMenu={displayMenu}
+      innerRef={menuButtonRef}
       onClick={toggleDisplayMenu}
-        ref={ref}
     />
   </nav>
-  )
 );
 
 UniversalNav.displayName = 'UniversalNav';
@@ -44,5 +45,6 @@ export default UniversalNav;
 UniversalNav.propTypes = {
   displayMenu: PropTypes.bool,
   menuButtonRef: PropTypes.object,
+  searchBarRef: PropTypes.object,
   toggleDisplayMenu: PropTypes.func
 };

client/src/components/Header/index.js

@@ -12,6 +12,7 @@ export class Header extends React.Component {
       displayMenu: false
     };
     this.menuButtonRef = React.createRef();
+    this.searchBarRef = React.createRef();
     this.handleClickOutside = this.handleClickOutside.bind(this);
     this.toggleDisplayMenu = this.toggleDisplayMenu.bind(this);
   }
@@ -29,7 +30,8 @@ export class Header extends React.Component {
       this.state.displayMenu &&
       this.menuButtonRef.current &&
       !this.menuButtonRef.current.contains(event.target) &&
-      event.target.id !== 'fcc_instantsearch'
+      this.searchBarRef.current &&
+      !this.searchBarRef.current.contains(event.target)
     ) {
       this.toggleDisplayMenu();
     }
@@ -48,7 +50,8 @@ export class Header extends React.Component {
         <header>
           <UniversalNav
             displayMenu={displayMenu}
-            ref={this.menuButtonRef}
+            menuButtonRef={this.menuButtonRef}
+            searchBarRef={this.searchBarRef}
             toggleDisplayMenu={this.toggleDisplayMenu}
           />
         </header>

client/src/components/search/searchBar/SearchBar.js

@@ -23,6 +23,7 @@ import './searchbar.css';
 configure({ ignoreTags: ['select', 'textarea'] });
 
 const propTypes = {
+  innerRef: PropTypes.object,
   isDropdownEnabled: PropTypes.bool,
   isSearchFocused: PropTypes.bool,
   toggleSearchDropdown: PropTypes.func.isRequired,
@@ -51,7 +52,6 @@ class SearchBar extends Component {
   constructor(props) {
     super(props);
 
-    this.searchBarRef = React.createRef();
     this.handleChange = this.handleChange.bind(this);
     this.handleSearch = this.handleSearch.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
@@ -87,7 +87,7 @@ class SearchBar extends Component {
 
   handleFocus(e) {
     const { toggleSearchFocused } = this.props;
-    const isSearchFocused = this.searchBarRef.current.contains(e.target);
+    const isSearchFocused = this.props.innerRef.current.contains(e.target);
     if (!isSearchFocused) {
       // Reset if user clicks outside of
       // search bar / closes dropdown
@@ -177,15 +177,11 @@ class SearchBar extends Component {
   };
 
   render() {
-    const { isDropdownEnabled, isSearchFocused } = this.props;
+    const { isDropdownEnabled, isSearchFocused, innerRef } = this.props;
     const { index } = this.state;
 
     return (
-      <div
-        className='fcc_searchBar'
-        data-testid='fcc_searchBar'
-        ref={this.searchBarRef}
-      >
+      <div className='fcc_searchBar' data-testid='fcc_searchBar' ref={innerRef}>
         <HotKeys handlers={this.keyHandlers} keyMap={this.keyMap}>
           <div className='fcc_search_wrapper'>
             <label className='fcc_sr_only' htmlFor='fcc_instantsearch'>