fix: search input overlay behaviour

decentraland · Oct 13, 2023 · 8088d82 · 8088d82
1 parent 04f4aba
commit 8088d82
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/components/Search/SearchInputMobile.css b/src/components/Search/SearchInputMobile.css
@@ -8,14 +8,14 @@
   justify-content: center;
   background: var(--white-900);
   width: 40px;
-  height: 35px;
+  height: 33px;
   gap: 8px;
   font-size: 16px;
 }
 
 .SearchInputMobile--open {
   width: 100%;
-  height: 34px;
+  height: 32px;
   padding-left: 10px;
   padding-right: 16px;
   top: 0;

diff --git a/src/components/Search/SearchInputMobile.tsx b/src/components/Search/SearchInputMobile.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useLayoutEffect, useRef, useState } from 'react'
 
 import { useLocation } from '@reach/router'
 import classNames from 'classnames'
@@ -62,6 +62,19 @@ export default function SearchInputMobile() {
     }
   }
 
+  useLayoutEffect(() => {
+    if (typeof window !== 'undefined') {
+      const onScroll = function () {
+        searchInput.current?.blur()
+        setOpen(false)
+      }
+
+      window.addEventListener('scroll', onScroll)
+
+      return () => window.removeEventListener('scroll', onScroll)
+    }
+  }, [])
+
   return (
     <div className={classNames('SearchInputMobile', open && 'SearchInputMobile--open')}>
       <div className="SearchInputMobile__Container">
@@ -81,6 +94,7 @@ export default function SearchInputMobile() {
         )}
       </div>
       <div
+        onClick={() => setOpen(false)}
         className={classNames(
           'SearchInputMobile__Overlay',
           open && 'SearchInputMobile__Overlay--open',