fix input element right show

Paymium · Feb 10, 2025 · 4ecf2ef · 4ecf2ef
1 parent f0d7fb3
commit 4ecf2ef
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 17 deletions.
diff --git a/.changeset/kind-chicken-hope.md b/.changeset/kind-chicken-hope.md
@@ -0,0 +1,5 @@
+---
+'@crossed/ui': patch
+---
+
+fix input element right
diff --git a/packages/ui/src/forms/Input.tsx b/packages/ui/src/forms/Input.tsx
@@ -173,23 +173,25 @@ export const Input = forwardRef<TextInput, InputProps>((allProps, ref) => {
               onChangeText={setValue}
             />
           </FormControl>
-          <XBox
-            style={composeStyles(form.elementRight, gapStyles.xs)}
-            onLayout={({ nativeEvent: { layout } }) =>
-              setElementRightWidth(layout.width)
-            }
-          >
-            {isValidElement(elementRight) &&
-            typeof elementRight.type !== 'string' &&
-            (elementRight.type as any).displayName === 'CrossedText'
-              ? cloneElement(elementRight, {
-                  style: [(elementRight as any).style, { color }],
-                } as any)
-              : elementRight}
-            {!!showClear && (
-              <CloseButton onPress={onClear} style={styles.close} />
-            )}
-          </XBox>
+          {!!elementRight && (
+            <XBox
+              style={composeStyles(form.elementRight, gapStyles.xs)}
+              onLayout={({ nativeEvent: { layout } }) =>
+                setElementRightWidth(layout.width)
+              }
+            >
+              {isValidElement(elementRight) &&
+              typeof elementRight.type !== 'string' &&
+              (elementRight.type as any).displayName === 'CrossedText'
+                ? cloneElement(elementRight, {
+                    style: [(elementRight as any).style, { color }],
+                  } as any)
+                : elementRight}
+              {!!showClear && (
+                <CloseButton onPress={onClear} style={styles.close} />
+              )}
+            </XBox>
+          )}
         </XBox>
         {error && <Text color="error">{error.toString()}</Text>}
       </YBox>