fix(client):make menu bar disappear after user chooses item from it on landing page (#43458)
* removed serachBarRef * removed serachBarRef * Revert "removed serachBarRef" This reverts commit6a5c2f4cb3
. * Revert "removed serachBarRef" This reverts commit67710b3d18
. * added innerRef as ref to SearchBarOptimized component * Update client/src/components/Header/index.tsx Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update client/src/components/search/searchBar/search-bar-optimized.tsx Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update client/src/components/search/searchBar/search-bar-optimized.tsx Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
@ -37,7 +37,7 @@ export const UniversalNav = ({
|
||||
|
||||
const search =
|
||||
typeof window !== `undefined` && isLanding(window.location.pathname) ? (
|
||||
<SearchBarOptimized />
|
||||
<SearchBarOptimized innerRef={searchBarRef} />
|
||||
) : (
|
||||
<SearchBar innerRef={searchBarRef} />
|
||||
);
|
||||
|
@ -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)
|
||||
) {
|
||||
|
@ -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
|
||||
|
Reference in New Issue
Block a user