From 43b1096313a41f6186ade3f5eb6bac9bc52a4504 Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Sat, 9 Jul 2022 17:27:36 -0400
Subject: [PATCH] expand search bar when typing on mobile

---
 web/components/contract-search.tsx | 54 +++++++++++++++++++-----------
 1 file changed, 34 insertions(+), 20 deletions(-)

diff --git a/web/components/contract-search.tsx b/web/components/contract-search.tsx
index 220a95ab..7c0460b4 100644
--- a/web/components/contract-search.tsx
+++ b/web/components/contract-search.tsx
@@ -22,6 +22,7 @@ import { Spacer } from './layout/spacer'
 import { ENV, IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
 import { trackCallback } from 'web/lib/service/analytics'
 import ContractSearchFirestore from 'web/pages/contract-search-firestore'
+import { useWindowSize } from 'web/hooks/use-window-size'
 
 const searchClient = algoliasearch(
   'GJQPAYENIF',
@@ -104,6 +105,10 @@ export function ContractSearch(props: {
 
   const indexName = `${indexPrefix}contracts-${sort}`
 
+  const [isSearching, setIsSearching] = useState(false)
+  const { width } = useWindowSize()
+  const showOptions = !isSearching || (width ?? 0) >= 500
+
   if (IS_PRIVATE_MANIFOLD || process.env.NEXT_PUBLIC_FIREBASE_EMULATE) {
     return (
       <ContractSearchFirestore
@@ -122,29 +127,38 @@ export function ContractSearch(props: {
           classNames={{
             form: 'before:top-6',
             input: '!pl-10 !input !input-bordered shadow-none w-[100px]',
-            resetIcon: 'mt-2 hidden sm:flex',
+            resetIcon: 'mt-2 sm:flex',
           }}
+          onFocus={() => setIsSearching(true)}
+          onBlur={() => setIsSearching(false)}
         />
-        <select
-          className="!select !select-bordered"
-          value={filter}
-          onChange={(e) => setFilter(e.target.value as filter)}
-          onBlur={trackCallback('select search filter')}
-        >
-          <option value="open">Open</option>
-          <option value="closed">Closed</option>
-          <option value="resolved">Resolved</option>
-          <option value="all">All</option>
-        </select>
-        {!hideOrderSelector && (
-          <SortBy
-            items={sortIndexes}
-            classNames={{
-              select: '!select !select-bordered',
-            }}
-            onBlur={trackCallback('select search sort')}
-          />
+
+        {showOptions && (
+          <>
+            <select
+              className="!select !select-bordered"
+              value={filter}
+              onChange={(e) => setFilter(e.target.value as filter)}
+              onBlur={trackCallback('select search filter')}
+            >
+              <option value="open">Open</option>
+              <option value="closed">Closed</option>
+              <option value="resolved">Resolved</option>
+              <option value="all">All</option>
+            </select>
+
+            {!hideOrderSelector && (
+              <SortBy
+                items={sortIndexes}
+                classNames={{
+                  select: '!select !select-bordered',
+                }}
+                onBlur={trackCallback('select search sort')}
+              />
+            )}
+          </>
         )}
+
         <Configure
           facetFilters={filters}
           numericFilters={numericFilters}