Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: focus input on search tab tap #11169

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: focus input on search tab tap #11169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
79bb158
feat: focus input on search tab tap
MounirDhahri Nov 21, 2024
b972158
fix: race condition
MounirDhahri Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 56 additions & 39 deletions src/app/Components/GlobalSearchInput/GlobalSearchInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,54 +3,71 @@ 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 { useDebouncedValue } from "app/utils/hooks/useDebouncedValue"
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 debouncedIsVisible = useDebouncedValue({ value: isVisible })
const tracking = useTracking()

useDismissSearchOverlayOnTabBarPress({ isVisible, ownerType, setIsVisible })
useDismissSearchOverlayOnTabBarPress({ isVisible, ownerType, setIsVisible })

return (
<Fragment>
<Touchable
onPress={() => {
tracking.trackEvent(
tracks.tappedGlobalSearchBar({
ownerType,
})
)
useImperativeHandle(ref, () => ({
focus: () => {
if (!debouncedIsVisible.debouncedValue) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here, I am debouncing the value to make sure I don't end up opening the modal again after dismissing it.

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 }) => ({
Expand Down
11 changes: 8 additions & 3 deletions src/app/Scenes/Search/Search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,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>("")
Expand All @@ -64,8 +65,12 @@ export const Search: React.FC = () => {
useRefetchWhenQueryChanged({ query: searchQuery, refetch })

const scrollableRef = useBottomTabsScrollToTop(() => {
// Focus input and open keyboard on bottom nav Search tab double-tab
searchProviderValues.inputRef.current?.focus()
if (enableNewSearchModal) {
// Focus input and open keyboard on bottom nav Search tab double-tab
searchInputRef.current?.focus()
} else {
searchProviderValues.inputRef.current?.focus()
}
})

// TODO: to be removed on ES results PR
Expand Down Expand Up @@ -136,7 +141,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}
Expand Down