diff --git a/src/features/gifPicker/GifPickerDialog.tsx b/src/features/gifPicker/GifPickerDialog.tsx index 677b953f55..6f51364408 100644 --- a/src/features/gifPicker/GifPickerDialog.tsx +++ b/src/features/gifPicker/GifPickerDialog.tsx @@ -1,9 +1,9 @@ -import {useEffect, useImperativeHandle, useRef, useState} from 'react' +import {useEffect, useRef, useState} from 'react' import {type TextInput} from 'react-native' import {ErrorBoundary} from '#/view/com/util/ErrorBoundary' import {type ListMethods} from '#/view/com/util/List' -import {ios, useBreakpoints} from '#/alf' +import {ios} from '#/alf' import * as Dialog from '#/components/Dialog' import {useThrottledValue} from '#/components/hooks/useThrottledValue' import { @@ -20,20 +20,14 @@ import {useRecentGifs} from '#/features/gifPicker/hooks/useRecentGifs' import {type Gif} from '#/features/gifPicker/types' export function GifPickerDialog({ - controlRef, + control, onClose, onSelectGif: onSelectGifProp, }: { - controlRef: React.RefObject<{open: () => void} | null> + control: Dialog.DialogControlProps onClose?: () => void onSelectGif: (gif: Gif) => void }) { - const control = Dialog.useDialogControl() - - useImperativeHandle(controlRef, () => ({ - open: () => control.open(), - })) - const onSelectGif = (gif: Gif) => { control.close(() => onSelectGifProp(gif)) } @@ -66,7 +60,6 @@ function GifPickerBody({ control: Dialog.DialogControlProps onSelectGif: (gif: Gif) => void }) { - const {gtMobile} = useBreakpoints() const textInputRef = useRef(null) const listRef = useRef(null) const [rawSearch, setRawSearch] = useState('') @@ -125,6 +118,7 @@ function GifPickerBody({ textInputRef.current?.clear() setRawSearch('') setActiveCategory('trending') + textInputRef.current?.focus() } const onGoBack = () => { @@ -182,7 +176,7 @@ function GifPickerBody({ return ( <> - {gtMobile && } + + diff --git a/src/features/gifPicker/components/GifPickerHeader.tsx b/src/features/gifPicker/components/GifPickerHeader.tsx index ce389b8e43..ee50cdb8e4 100644 --- a/src/features/gifPicker/components/GifPickerHeader.tsx +++ b/src/features/gifPicker/components/GifPickerHeader.tsx @@ -37,8 +37,16 @@ export function GifPickerHeader({ + label={l({ + message: 'Clear GIF search', + comment: + 'Accessibility label for the X button inside the search input that clears the typed query and returns to the trending feed.', + })}> )} diff --git a/src/features/gifPicker/components/GifPickerItem.tsx b/src/features/gifPicker/components/GifPickerItem.tsx index d3f5828378..e307e064a3 100644 --- a/src/features/gifPicker/components/GifPickerItem.tsx +++ b/src/features/gifPicker/components/GifPickerItem.tsx @@ -28,7 +28,11 @@ export function GifPickerItem({ return (