gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
* removed serachBarRef

* removed serachBarRef

* Revert "removed serachBarRef"

This reverts commit 6a5c2f4cb3.

* Revert "removed serachBarRef"

This reverts commit 67710b3d18.

* 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:
Noor Fakhry
2021-10-06 16:42:54 +02:00
committed by GitHub
parent bc802cbbbd
commit 8518079316
3 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/Header/components/universal-nav.tsx
View File

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

2
client/src/components/Header/index.tsx
View File

@ -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)
) {

8
client/src/components/search/searchBar/search-bar-optimized.tsx
View File

@ -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