diff --git a/src/features/gifPicker/GifPickerDialog.tsx b/src/features/gifPicker/GifPickerDialog.tsx index 24476d08fd..08d126b876 100644 --- a/src/features/gifPicker/GifPickerDialog.tsx +++ b/src/features/gifPicker/GifPickerDialog.tsx @@ -100,9 +100,12 @@ function GifPickerBody({ const items = isRecentsActive ? getRecents() : networkItems const hasData = items.length > 0 - // Remount the grid when the data source changes so FlatList doesn't carry - // stale virtualized cells between e.g. a search and the recents list. - const viewKey = isRecentsActive ? 'recents' : `network:${effectiveSearch}` + // Remount the grid only when switching between the network view and the + // local recents list, so FlatList doesn't carry stale virtualized cells + // across that boundary. Within the network view we rely on normal React + // reconciliation as `items` changes — remounting on every search keystroke + // would blur the sticky-header search input. + const viewKey = isRecentsActive ? 'recents' : 'network' const onEndReached = () => { if (isRecentsActive) return @@ -142,7 +145,7 @@ function GifPickerBody({ control.close()} + onGoBack={onGoBack} onEscape={() => control.close()} /> {showPills && ( diff --git a/src/features/gifPicker/components/GifPickerGrid.tsx b/src/features/gifPicker/components/GifPickerGrid.tsx index dccb3c094c..5d3870954e 100644 --- a/src/features/gifPicker/components/GifPickerGrid.tsx +++ b/src/features/gifPicker/components/GifPickerGrid.tsx @@ -16,9 +16,10 @@ type Props = { isFetchingNextPage: boolean error: unknown /** - * Identifies the current data source (e.g. "recents", "trending", a search - * term). Used to remount the underlying FlatList when switching sources so - * virtualized cells from the previous view can't bleed into the next one. + * Identifies the current data source at a coarse grain ("recents" vs + * "network"). Used to remount the underlying FlatList when crossing that + * boundary so virtualized cells from the previous view can't bleed into the + * next one. */ viewKey: string fetchNextPage: () => Promise