hide suggest when input is hidden on mobile

ui/pages/SearchResults.tsx

@@ -102,15 +102,22 @@ const SearchResultsPageContent = () => {
     );
   })();
 
+  const inputRef = React.useRef<HTMLFormElement>(null);
+  const handelHide = React.useCallback(() => {
+    inputRef.current?.querySelector('input')?.blur();
+  }, [ ]);
+
   const renderSearchBar = React.useCallback(() => {
     return (
       <SearchBarInput
+        ref={ inputRef }
         onChange={ handleSearchTermChange }
         onSubmit={ handleSubmit }
         value={ searchTerm }
+        onHide={ handelHide }
       />
     );
-  }, [ handleSearchTermChange, handleSubmit, searchTerm ]);
+  }, [ handleSearchTermChange, handleSubmit, searchTerm, handelHide ]);
 
   const renderHeader = React.useCallback(() => {
     return <Header renderSearchBar={ renderSearchBar }/>;

ui/pages/Transactions.tsx

@@ -35,7 +35,7 @@ const Transactions = () => {
   ];
 
   return (
-    <Page hideMobileHeaderOnScrollDown>
+    <Page>
       <Box h="100%">
         <PageTitle text="Transactions"/>
         <RoutedTabs

ui/shared/Page/Page.tsx

@@ -13,7 +13,6 @@ import NavigationDesktop from 'ui/snippets/navigation/NavigationDesktop';
 interface Props {
   children: React.ReactNode;
   wrapChildren?: boolean;
-  hideMobileHeaderOnScrollDown?: boolean;
   isHomePage?: boolean;
   renderHeader?: () => React.ReactNode;
 }
@@ -21,7 +20,6 @@ interface Props {
 const Page = ({
   children,
   wrapChildren = true,
-  hideMobileHeaderOnScrollDown,
   isHomePage,
   renderHeader,
 }: Props) => {
@@ -47,7 +45,7 @@ const Page = ({
       <Flex flexDir="column" flexGrow={ 1 } w={{ base: '100%', lg: 'auto' }}>
         { renderHeader ?
           renderHeader() :
-          <Header isHomePage={ isHomePage } hideOnScrollDown={ hideMobileHeaderOnScrollDown }/>
+          <Header isHomePage={ isHomePage }/>
         }
         <ErrorBoundary renderErrorScreen={ renderErrorScreen }>
           { renderedChildren }

ui/snippets/header/Header.tsx

@@ -13,15 +13,14 @@ import ColorModeToggler from './ColorModeToggler';
 
 type Props = {
   isHomePage?: boolean;
-  hideOnScrollDown?: boolean;
   renderSearchBar?: () => React.ReactNode;
 }
 
-const Header = ({ hideOnScrollDown, isHomePage, renderSearchBar }: Props) => {
+const Header = ({ isHomePage, renderSearchBar }: Props) => {
   const bgColor = useColorModeValue('white', 'black');
   const scrollDirection = useScrollDirection();
 
-  const searchBar = renderSearchBar ? renderSearchBar() : <SearchBar withShadow={ !hideOnScrollDown }/>;
+  const searchBar = renderSearchBar ? renderSearchBar() : <SearchBar/>;
 
   return (
     <>
@@ -40,7 +39,7 @@ const Header = ({ hideOnScrollDown, isHomePage, renderSearchBar }: Props) => {
           zIndex="sticky2"
           transitionProperty="box-shadow"
           transitionDuration="slow"
-          boxShadow={ !hideOnScrollDown && scrollDirection === 'down' ? 'md' : 'none' }
+          boxShadow={ scrollDirection === 'down' ? 'md' : 'none' }
         >
           <Burger/>
           <NetworkLogo/>

ui/snippets/searchBar/SearchBar.tsx

 import { Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
+import _debounce from 'lodash/debounce';
 import type { FormEvent, FocusEvent } from 'react';
 import React from 'react';
 
@@ -10,11 +11,10 @@ import SearchBarSuggest from './SearchBarSuggest';
 import useSearchQuery from './useSearchQuery';
 
 type Props = {
-  withShadow?: boolean;
   isHomepage?: boolean;
 }
 
-const SearchBar = ({ isHomepage, withShadow }: Props) => {
+const SearchBar = ({ isHomepage }: Props) => {
   const { isOpen, onClose, onOpen } = useDisclosure();
   const inputRef = React.useRef<HTMLFormElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
@@ -35,6 +35,11 @@ const SearchBar = ({ isHomepage, withShadow }: Props) => {
     onOpen();
   }, [ onOpen ]);
 
+  const handelHide = React.useCallback(() => {
+    onClose();
+    inputRef.current?.querySelector('input')?.blur();
+  }, [ onClose ]);
+
   const handleBlur = React.useCallback((event: FocusEvent<HTMLFormElement>) => {
     const isFocusInMenu = menuRef.current?.contains(event.relatedTarget);
     if (!isFocusInMenu) {
@@ -48,10 +53,18 @@ const SearchBar = ({ isHomepage, withShadow }: Props) => {
   }, [ menuPaddingX ]);
 
   React.useEffect(() => {
+    const inputEl = inputRef.current;
+    if (!inputEl) {
+      return;
+    }
     calculateMenuWidth();
-    window.addEventListener('resize', calculateMenuWidth);
+
+    const resizeHandler = _debounce(calculateMenuWidth, 200);
+    const resizeObserver = new ResizeObserver(resizeHandler);
+    resizeObserver.observe(inputRef.current);
+
     return function cleanup() {
-      window.removeEventListener('resize', calculateMenuWidth);
+      resizeObserver.unobserve(inputEl);
     };
   }, [ calculateMenuWidth ]);
 
@@ -71,8 +84,8 @@ const SearchBar = ({ isHomepage, withShadow }: Props) => {
           onSubmit={ handleSubmit }
           onFocus={ handleFocus }
           onBlur={ handleBlur }
+          onHide={ handelHide }
           isHomepage={ isHomepage }
-          withShadow={ withShadow }
           value={ searchTerm }
         />
       </PopoverTrigger>

ui/snippets/searchBar/SearchBarInput.tsx

@@ -12,12 +12,12 @@ interface Props {
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
   onBlur?: (event: FocusEvent<HTMLFormElement>) => void;
   onFocus?: () => void;
+  onHide?: () => void;
   isHomepage?: boolean;
-  withShadow?: boolean;
   value: string;
 }
 
-const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, withShadow, value }: Props, ref: React.ForwardedRef<HTMLFormElement>) => {
+const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHide, value }: Props, ref: React.ForwardedRef<HTMLFormElement>) => {
   const [ isSticky, setIsSticky ] = React.useState(false);
   const scrollDirection = useScrollDirection();
   const isMobile = useIsMobile();
@@ -28,7 +28,7 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, withS
     } else {
       setIsSticky(false);
     }
-  }, []);
+  }, [ ]);
 
   React.useEffect(() => {
     if (!isMobile || isHomepage) {
@@ -48,6 +48,12 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, withS
   const bgColor = useColorModeValue('white', 'black');
   const transformMobile = scrollDirection !== 'down' ? 'translateY(0)' : 'translateY(-100%)';
 
+  React.useEffect(() => {
+    if (isMobile && scrollDirection === 'down') {
+      onHide?.();
+    }
+  }, [ scrollDirection, onHide, isMobile ]);
+
   return (
     <chakra.form
       ref={ ref }
@@ -65,7 +71,7 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, withS
       paddingX={{ base: isHomepage ? 0 : 4, lg: 0 }}
       paddingTop={{ base: isHomepage ? 0 : 1, lg: 0 }}
       paddingBottom={{ base: isHomepage ? 0 : 4, lg: 0 }}
-      boxShadow={ withShadow && scrollDirection !== 'down' && isSticky ? 'md' : 'none' }
+      boxShadow={ scrollDirection !== 'down' && isSticky ? 'md' : 'none' }
       transform={{ base: isHomepage ? 'none' : transformMobile, lg: 'none' }}
       transitionProperty="transform,box-shadow"
       transitionDuration="slow"