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 = const search =
typeof window !== `undefined` && isLanding(window.location.pathname) ? ( typeof window !== `undefined` && isLanding(window.location.pathname) ? (
<SearchBarOptimized /> <SearchBarOptimized innerRef={searchBarRef} />
) : ( ) : (
<SearchBar 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.state.displayMenu &&
this.menuButtonRef.current && this.menuButtonRef.current &&
!this.menuButtonRef.current.contains(event.target) && !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 &&
!this.searchBarRef.current.contains(event.target) !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 Magnifier from '../../../assets/icons/Magnifier';
import { searchPageUrl } from '../../../utils/algolia-locale-setup'; 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 { t } = useTranslation();
const placeholder = t('search.placeholder'); const placeholder = t('search.placeholder');
const searchUrl = searchPageUrl; const searchUrl = searchPageUrl;
@ -18,7 +22,7 @@ const SearchBarOptimized = (): JSX.Element => {
}; };
return ( 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='fcc_search_wrapper'>
<div className='ais-SearchBox' data-cy='ais-SearchBox'> <div className='ais-SearchBox' data-cy='ais-SearchBox'>
<form <form