fix clear button in input (#5650)

Co-authored-by: Eric Bailey <[email protected]>
bluesky-social · Oct 8, 2024 · 3da4f9b · 3da4f9b
1 parent 2ab9512
commit 3da4f9b
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/src/components/forms/SearchInput.tsx b/src/components/forms/SearchInput.tsx
@@ -23,6 +23,7 @@ export const SearchInput = React.forwardRef<TextInput, SearchInputProps>(
   function SearchInput({value, label, onClearText, ...rest}, ref) {
     const t = useTheme()
     const {_} = useLingui()
+    const showClear = value && value.length > 0
 
     return (
       <View style={[a.w_full, a.relative]}>
@@ -41,11 +42,18 @@ export const SearchInput = React.forwardRef<TextInput, SearchInputProps>(
             autoCorrect={false}
             autoComplete="off"
             autoCapitalize="none"
+            style={[
+              showClear
+                ? {
+                    paddingRight: 24,
+                  }
+                : {},
+            ]}
             {...rest}
           />
         </TextField.Root>
 
-        {value && value.length > 0 && (
+        {showClear && (
           <View
             style={[
               a.absolute,