fix: search input mobile

decentraland · Oct 12, 2023 · 3a9216d · 3a9216d
1 parent 04e6e26
commit 3a9216d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 39 deletions.
diff --git a/src/components/Layout/Navigation.css b/src/components/Layout/Navigation.css
@@ -28,7 +28,8 @@
 
 @media (max-width: 767px) {
   .Navigation .dcl.tabs {
-    padding-right: 32px;
+    padding-left: 4px;
+    padding-right: 36px;
   }
 
   .Navigation .dcl.tabs-left {
@@ -37,7 +38,7 @@
   }
 
   .Navigation .dcl.tab {
-    margin: 0 16px;
+    margin: 0 12px;
     padding: 0;
     padding-bottom: 14px;
     white-space: nowrap;

diff --git a/src/components/Search/SearchInputMobile.css b/src/components/Search/SearchInputMobile.css
@@ -16,8 +16,8 @@
 .SearchInputMobile--open {
   width: 100%;
   height: 34px;
-  padding-left: 16px;
-  padding-right: 10px;
+  padding-left: 10px;
+  padding-right: 16px;
   top: 0;
 }
 
@@ -42,8 +42,6 @@
 .SearchInputMobile__Input--open {
   width: 100%;
   padding: 8px 32px;
-  background: var(--white-900) no-repeat 0 center;
-  background-image: url('../../images/icons/new-magnify.svg');
 }
 
 .SearchInputMobile__CloseIcon {
@@ -58,3 +56,18 @@
   position: relative;
   width: 100%;
 }
+
+.SearchInputMobile__Overlay {
+  position: fixed;
+  top: 113px; /* TODO: Default: 113px; Snapshot Unstable: 163px */
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--alpha-black-300);
+  z-index: 999;
+  visibility: hidden;
+}
+
+.SearchInputMobile__Overlay--open {
+  visibility: visible;
+}
diff --git a/src/components/Search/SearchInputMobile.tsx b/src/components/Search/SearchInputMobile.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 
 import { useLocation } from '@reach/router'
 import classNames from 'classnames'
@@ -10,41 +10,29 @@ import Cross from '../Icon/Cross'
 
 import './SearchInputMobile.css'
 
-function handleSearch(textSearch: string, location: Location) {
-  const newParams = new URLSearchParams(location.search)
-  if (textSearch) {
-    newParams.set('search', textSearch)
-    newParams.delete('page')
-    newParams.delete('order')
-  } else {
-    newParams.delete('search')
-    newParams.delete('page')
-  }
-
-  navigate(locations.proposals(newParams))
-}
-
 export default function SearchInputMobile() {
   const t = useFormatMessage()
   const location = useLocation()
   const { search } = useProposalsSearchParams()
   const searchInput = useRef<HTMLInputElement>(null)
   const [open, setOpen] = useState(false)
-  const [searchText, setSearchText] = useState(() => search || '')
-
-  const focusSearch = () => {
-    searchInput.current?.focus()
-    searchInput.current?.click()
-  }
+  const [searchText, setSearchText] = useState(search || '')
 
-  useEffect(() => {
-    if (!search) {
-      setSearchText('')
-      setOpen(false)
+  const handleSearch = (textSearch: string, location: Location) => {
+    const newParams = new URLSearchParams(location.search)
+    if (textSearch) {
+      newParams.set('search', textSearch)
+      newParams.delete('page')
+      newParams.delete('order')
     } else {
-      focusSearch()
+      newParams.delete('search')
+      newParams.delete('page')
     }
-  }, [search])
+
+    setOpen(false)
+    searchInput.current?.blur()
+    navigate(locations.proposals(newParams))
+  }
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchText(e.target.value)
@@ -55,7 +43,8 @@ export default function SearchInputMobile() {
       setOpen(false)
     } else {
       setSearchText('')
-      focusSearch()
+      searchInput.current?.focus()
+      searchInput.current?.click()
     }
   }
 
@@ -65,7 +54,7 @@ export default function SearchInputMobile() {
     }
   }
 
-  const keyUpHandler = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.code === 'Escape') {
       setSearchText('')
     }
@@ -74,17 +63,16 @@ export default function SearchInputMobile() {
   return (
     <div className={classNames('SearchInputMobile', open && 'SearchInputMobile--open')}>
       <div className="SearchInputMobile__Container">
-        <div className="SearchInputMobile__Gradient" />
+        {!open && <div className="SearchInputMobile__Gradient" />}
         <input
+          ref={searchInput}
           className={classNames('SearchInputMobile__Input', open && 'SearchInputMobile__Input--open')}
           value={searchText}
           placeholder={t('navigation.search.placeholder') || ''}
           onChange={handleChange}
           onKeyPress={handleKeyPress}
-          onKeyUp={keyUpHandler}
+          onKeyUp={handleKeyUp}
           onFocus={() => setOpen(true)}
-          onBlur={() => setOpen(!!searchText)}
-          ref={searchInput}
         />
         {open && (
           <Cross className="SearchInputMobile__CloseIcon" size="14" color="var(--black-800)" onClick={handleClear} />