diff --git a/src/components/forms/SearchInput.tsx b/src/components/forms/SearchInput.tsx index dca647366a..826dfcf6fc 100644 --- a/src/components/forms/SearchInput.tsx +++ b/src/components/forms/SearchInput.tsx @@ -1,4 +1,3 @@ -import {forwardRef} from 'react' import { type NativeSyntheticEvent, type TextInput, @@ -17,6 +16,7 @@ import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' import {IS_NATIVE} from '#/env' type SearchInputProps = Omit & { + ref?: React.Ref label?: TextField.InputProps['label'] /** * Called when the user presses the (X) button @@ -28,74 +28,79 @@ type SearchInputProps = Omit & { onEscape?: () => void } -export const SearchInput = forwardRef( - function SearchInput({value, label, onClearText, onEscape, ...rest}, ref) { - const t = useTheme() - const {_} = useLingui() - const showClear = value && value.length > 0 +export function SearchInput({ + ref, + value, + label, + onClearText, + onEscape, + ...rest +}: SearchInputProps) { + const t = useTheme() + const {_} = useLingui() + const showClear = value && value.length > 0 - const onKeyPress = ( - evt: NativeSyntheticEvent, - ) => { - if (evt.nativeEvent.key === 'Escape') { - onEscape?.() - } + const onKeyPress = ( + evt: NativeSyntheticEvent, + ) => { + if (evt.nativeEvent.key === 'Escape') { + onEscape?.() } + } - return ( - - - - - + return ( + + + + + - {showClear && ( - - - - )} - - ) - }, -) + {showClear && ( + + + + )} + + ) +}