From e73afffc55cd5b1f7bb0c53d2a2a2bea14c98882 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Mon, 7 Nov 2022 14:22:41 -0500
Subject: [PATCH] fix(striker-ui): allow wrapper 'type' in OutlinedInput

---
 .../OutlinedInput/OutlinedInput.tsx           | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/striker-ui/components/OutlinedInput/OutlinedInput.tsx b/striker-ui/components/OutlinedInput/OutlinedInput.tsx
index a2986f65..c5e7bc45 100644
--- a/striker-ui/components/OutlinedInput/OutlinedInput.tsx
+++ b/striker-ui/components/OutlinedInput/OutlinedInput.tsx
@@ -37,18 +37,21 @@ const OutlinedInput: FC<OutlinedInputProps> = (outlinedInputProps) => {
     onPasswordVisibilityAppend,
     sx,
     inputProps: { type: baseType, ...inputRestProps } = {},
+    // Input props that depend on other input props.
+    type: initialType = baseType,
+
     ...outlinedInputRestProps
   } = outlinedInputProps;
 
-  const [type, setType] = useState<string>(baseType);
+  const [type, setType] = useState<string>(initialType);
 
-  const additionalEndAdornment = useMemo(() => {
-    const isBaseTypePassword = baseType === INPUT_TYPES.password;
+  const passwordVisibilityButton = useMemo(() => {
+    const isInitialTypePassword = initialType === INPUT_TYPES.password;
     const isTypePassword = type === INPUT_TYPES.password;
 
     return (
       <>
-        {isBaseTypePassword && (
+        {isInitialTypePassword && (
           <MUIIconButton
             onClick={(...args) => {
               const newType = isTypePassword
@@ -64,7 +67,7 @@ const OutlinedInput: FC<OutlinedInputProps> = (outlinedInputProps) => {
         )}
       </>
     );
-  }, [baseType, onPasswordVisibilityAppend, type]);
+  }, [initialType, onPasswordVisibilityAppend, type]);
   const combinedSx = useMemo(
     () => ({
       color: GREY,
@@ -104,11 +107,11 @@ const OutlinedInput: FC<OutlinedInputProps> = (outlinedInputProps) => {
         props: { children: castedChildren = [], ...castedRestProps },
       } = casted;
 
-      return cloneElement(casted, {
+      result = cloneElement(casted, {
         ...castedRestProps,
         children: (
           <>
-            {additionalEndAdornment}
+            {passwordVisibilityButton}
             {castedChildren}
           </>
         ),
@@ -116,7 +119,7 @@ const OutlinedInput: FC<OutlinedInputProps> = (outlinedInputProps) => {
     }
 
     return result;
-  }, [additionalEndAdornment, endAdornment]);
+  }, [passwordVisibilityButton, endAdornment]);
 
   return (
     <MUIOutlinedInput