From 3da4f9b170ad8485d8940023081a55ef6478cb18 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 8 Oct 2024 11:45:04 -0700
Subject: fix clear button in input (#5650)

Co-authored-by: Eric Bailey <git@esb.lol>
---
 src/components/forms/SearchInput.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'src/components/forms')

diff --git a/src/components/forms/SearchInput.tsx b/src/components/forms/SearchInput.tsx
index 30791d005..97540d0bc 100644
--- 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,
-- 
cgit 1.4.1