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) => { onPasswordVisibilityAppend, sx, inputProps: { type: baseType, ...inputRestProps } = {}, + // Input props that depend on other input props. + type: initialType = baseType, + ...outlinedInputRestProps } = outlinedInputProps; - const [type, setType] = useState(baseType); + const [type, setType] = useState(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 && ( { const newType = isTypePassword @@ -64,7 +67,7 @@ const OutlinedInput: FC = (outlinedInputProps) => { )} ); - }, [baseType, onPasswordVisibilityAppend, type]); + }, [initialType, onPasswordVisibilityAppend, type]); const combinedSx = useMemo( () => ({ color: GREY, @@ -104,11 +107,11 @@ const OutlinedInput: FC = (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) => { } return result; - }, [additionalEndAdornment, endAdornment]); + }, [passwordVisibilityButton, endAdornment]); return (