feat: focus input on search tab tap

artsy · Nov 21, 2024 · f43879c · f43879c
1 parent a963818
commit f43879c
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 42 deletions.
diff --git a/src/app/Components/GlobalSearchInput/GlobalSearchInput.tsx b/src/app/Components/GlobalSearchInput/GlobalSearchInput.tsx
@@ -3,54 +3,69 @@ import { Flex, RoundSearchInput, Touchable } from "@artsy/palette-mobile"
 import { GlobalSearchInputOverlay } from "app/Components/GlobalSearchInput/GlobalSearchInputOverlay"
 import { useDismissSearchOverlayOnTabBarPress } from "app/Components/GlobalSearchInput/utils/useDismissSearchOverlayOnTabBarPress"
 import { ICON_HIT_SLOP } from "app/Components/constants"
-import { Fragment, useState } from "react"
+import { forwardRef, Fragment, useImperativeHandle, useState } from "react"
 import { useTracking } from "react-tracking"
 
-export const GlobalSearchInput: React.FC<{
+type GlobalSearchInputProps = {
   ownerType: OwnerType
-}> = ({ ownerType }) => {
-  const [isVisible, setIsVisible] = useState(false)
-  const tracking = useTracking()
+}
+export type GlobalSearchInput = {
+  focus: () => void
+}
+
+export const GlobalSearchInput = forwardRef<GlobalSearchInput, GlobalSearchInputProps>(
+  ({ ownerType }, ref) => {
+    const [isVisible, setIsVisible] = useState(false)
+    const tracking = useTracking()
 
-  useDismissSearchOverlayOnTabBarPress({ isVisible, ownerType, setIsVisible })
+    useDismissSearchOverlayOnTabBarPress({ isVisible, ownerType, setIsVisible })
 
-  return (
-    <Fragment>
-      <Touchable
-        onPress={() => {
-          tracking.trackEvent(
-            tracks.tappedGlobalSearchBar({
-              ownerType,
-            })
-          )
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        if (!isVisible) {
           setIsVisible(true)
-        }}
-        hitSlop={ICON_HIT_SLOP}
-        testID="search-button"
-      >
-        {/* In order to make the search input behave like a button here, we wrapped it with a
+        }
+      },
+    }))
+
+    return (
+      <Fragment>
+        <Touchable
+          onPress={() => {
+            tracking.trackEvent(
+              tracks.tappedGlobalSearchBar({
+                ownerType,
+              })
+            )
+            setIsVisible(true)
+          }}
+          hitSlop={ICON_HIT_SLOP}
+          testID="search-button"
+        >
+          {/* In order to make the search input behave like a button here, we wrapped it with a
          Touchable and set pointerEvents to none. This will prevent the input from receiving
          touch events and make sure they are being handled by the Touchable.
         */}
-        <Flex pointerEvents="none">
-          <RoundSearchInput
-            placeholder="Search Artsy"
-            accessibilityHint="Search artists, artworks, galleries etc."
-            accessibilityLabel="Search artists, artworks, galleries etc."
-            maxLength={55}
-            numberOfLines={1}
-            multiline={false}
-          />
-        </Flex>
-      </Touchable>
-      <GlobalSearchInputOverlay
-        ownerType={ownerType}
-        visible={isVisible}
-        hideModal={() => setIsVisible(false)}
-      />
-    </Fragment>
-  )
-}
+          <Flex pointerEvents="none">
+            <RoundSearchInput
+              placeholder="Search Artsy"
+              accessibilityHint="Search artists, artworks, galleries etc."
+              accessibilityLabel="Search artists, artworks, galleries etc."
+              maxLength={55}
+              numberOfLines={1}
+              multiline={false}
+            />
+          </Flex>
+        </Touchable>
+        <GlobalSearchInputOverlay
+          ownerType={ownerType}
+          visible={isVisible}
+          hideModal={() => setIsVisible(false)}
+        />
+      </Fragment>
+    )
+  }
+)
 
 const tracks = {
   tappedGlobalSearchBar: ({ ownerType }: { ownerType: OwnerType }) => ({

diff --git a/src/app/Scenes/Search/Search.tsx b/src/app/Scenes/Search/Search.tsx
@@ -44,6 +44,7 @@ export const searchQueryDefaultVariables: SearchQuery$variables = {
 }
 
 export const Search: React.FC = () => {
+  const searchInputRef = useRef<GlobalSearchInput>(null)
   const enableNewSearchModal = useFeatureFlag("AREnableNewSearchModal")
   const searchPillsRef = useRef<ScrollView>(null)
   const [searchQuery, setSearchQuery] = useState<string>("")
@@ -62,9 +63,13 @@ export const Search: React.FC = () => {
 
   useRefetchWhenQueryChanged({ query: searchQuery, refetch })
 
+  // Focus input and open keyboard on bottom nav Search tab double-tab
   const scrollableRef = useBottomTabsScrollToTop("search", () => {
-    // Focus input and open keyboard on bottom nav Search tab double-tab
-    searchProviderValues.inputRef.current?.focus()
+    if (enableNewSearchModal) {
+      searchInputRef.current?.focus()
+    } else {
+      searchProviderValues.inputRef.current?.focus()
+    }
   })
 
   // TODO: to be removed on ES results PR
@@ -135,7 +140,7 @@ export const Search: React.FC = () => {
       <ArtsyKeyboardAvoidingView>
         <Flex p={2} pb={enableNewSearchModal ? 1 : 0}>
           {enableNewSearchModal ? (
-            <GlobalSearchInput ownerType={OwnerType.search} />
+            <GlobalSearchInput ownerType={OwnerType.search} ref={searchInputRef} />
           ) : (
             <SearchInput
               ref={searchProviderValues?.inputRef}