From 079d69dffb5bcf46d0befed50976c6a9779249ac Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 11:05:06 +0700
Subject: [PATCH] refactor(FE): Simplify SelectInput control styling

---
 src/components/input/SelectInput.tsx | 54 ++++++++++++++--------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index fc7926cc..a79054dd 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -89,7 +89,7 @@ const CustomControl = <
 >(
   props: ControlProps<Option, IsMulti, Group>
 ) => {
-  const { children, innerProps, className } = props;
+  const { children, innerProps } = props;
 
   const customProps = props.selectProps as unknown as {
     shouldShowAdornment?: boolean;
@@ -101,10 +101,7 @@ const CustomControl = <
 
   return (
     <ReactSelectComponents.Control {...props}>
-      <div
-        className={`${className} flex-1 pl-3 gap-1 flex items-center transition-all duration-200`}
-        {...innerProps}
-      >
+      <div className='flex-1 pl-3 gap-1 flex items-center' {...innerProps}>
         {shouldShowAdornment && startAdornment}
         {children}
       </div>
@@ -280,21 +277,20 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
             hideSelectedOptions={hideSelectedOptions}
             className={cn('w-full flex-1', className?.select)}
             classNames={{
-              ...(!startAdornment && {
-                control: ({ isFocused, isDisabled }) =>
-                  cn('w-full rounded-lg! border bg-white transition-shadow', {
-                    'cursor-pointer!': !readOnly && !isDisabled,
-                    'border-red-500! ring-2 ring-red-200': isError,
-                    'border-indigo-500 ring-2 ring-indigo-200': isFocused,
-                    'border-base-content/10!': !isError && !isFocused,
-                    'bg-gray-100 text-gray-400 cursor-not-allowed':
-                      isDisabled && !readOnly,
-                    'bg-transparent! cursor-not-allowed!': readOnly,
-                    'rounded-l-none!': inputPrefix,
-                    'rounded-r-none!': inputSuffix,
-                  }),
-                valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
-              }),
+              control: ({ isFocused, isDisabled }) =>
+                cn('w-full border bg-white transition-shadow', 'rounded-lg!', {
+                  'cursor-pointer!': !readOnly && !isDisabled,
+                  'border-red-500! ring-2 ring-red-200': isError,
+                  'border-indigo-500 ring-2 ring-indigo-200':
+                    isFocused && !startAdornment,
+                  'border-base-content/10!': !isError && !isFocused,
+                  'bg-gray-100 text-gray-400 cursor-not-allowed':
+                    isDisabled && !readOnly,
+                  'bg-transparent! cursor-not-allowed!': readOnly,
+                  'rounded-l-none!': inputPrefix && !startAdornment,
+                  'rounded-r-none!': inputSuffix && !startAdornment,
+                }),
+              valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
               placeholder: () =>
                 cn({
                   'text-gray-400 text-sm leading-tight': !isError,
@@ -406,19 +402,23 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           hideSelectedOptions={hideSelectedOptions}
           className={cn('w-full', className?.select)}
           classNames={{
-            ...(!startAdornment && {
-              control: ({ isFocused, isDisabled }) =>
-                cn('w-full rounded-lg! border bg-white transition-shadow', {
+            control: ({ isFocused, isDisabled }) =>
+              cn(
+                'w-full border bg-white transition-shadow',
+                // Gunakan rounded-lg untuk semua kasus
+                'rounded-lg!',
+                {
                   'cursor-pointer!': !readOnly && !isDisabled,
                   'border-red-500! ring-2 ring-red-200': isError,
-                  'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                  'border-indigo-500 ring-2 ring-indigo-200':
+                    isFocused && !startAdornment,
                   'border-base-content/10!': !isError && !isFocused,
                   'bg-gray-100 text-gray-400 cursor-not-allowed':
                     isDisabled && !readOnly,
                   'bg-transparent! cursor-not-allowed!': readOnly,
-                }),
-              valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
-            }),
+                }
+              ),
+            valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
             placeholder: () =>
               cn({
                 'text-gray-400 text-sm leading-tight': !isError,