From a5e379cc7fdb10231e7dab5de332d1ebd2dd578a Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Tue, 5 May 2026 16:26:07 +0800
Subject: [PATCH] fix: tampilkan ikon search dan ikon x secara bersamaan di
 input pencarian

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/inputForm.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/inputForm.tsx b/components/inputForm.tsx
index b09c980..c0bc45b 100644
--- a/components/inputForm.tsx
+++ b/components/inputForm.tsx
@@ -30,6 +30,10 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
    const { colors } = useTheme();
 
    if (itemLeft != undefined || itemRight != undefined) {
+      const hasBothItems = itemLeft != undefined && itemRight != undefined;
+      const baseInputWidth = width ? lebar * width / 100 : lebar * 0.78;
+      // When both icons present, shrink TextInput by right icon size to keep container width stable
+      const textInputWidth = hasBothItems ? baseInputWidth - 30 : baseInputWidth;
       return (
          <View style={[mb && Styles.mb10]}>
             {
@@ -42,7 +46,7 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
             }
             <View style={[
                Styles.inputRoundForm,
-               itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft,
+               hasBothItems ? Styles.inputRoundFormLeft : itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft,
                multiline && { alignItems: 'flex-end' },
                round && Styles.round30,
                {
@@ -50,12 +54,11 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
                },
                error ? { borderColor: colors.error } : { borderColor: colors.icon + '20' },
                Platform.OS == 'ios' ? { paddingVertical: 10 } : { paddingVertical: 0, minHeight: 40 },
-               { alignItems: 'center' },
                multiline
                   ? { alignItems: "flex-end" }
                   : { alignItems: "center" },
             ]}>
-               {itemRight != undefined ? itemRight : itemLeft}
+               {hasBothItems ? itemLeft : (itemRight != undefined ? itemRight : itemLeft)}
                <TextInput
                   editable={!disable}
                   value={value}
@@ -68,10 +71,11 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
                   style={[
                      Styles.mh05,
                      multiline && { height: '100%', maxHeight: 100 },
-                     { width: width ? lebar * width / 100 : lebar * 0.78, color: colors.text },
+                     { width: textInputWidth, color: colors.text },
                      Platform.OS == 'ios' ? { paddingVertical: 1, paddingTop: 4 } : { paddingVertical: 0 },
                   ]}
                />
+               {hasBothItems && itemRight}
             </View>
             {error && (<Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>{errorText}</Text>)}
             {info != undefined && (<Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mt05]}>{info}</Text>)}