I am facing an issue with toggling the input type between password and text to display the password in a login form. The expected functionality is that clicking on the eye icon next to the password input should reveal the password in plain text, but this is not happening as intended. I have attempted to dynamically switch the password input type from 'password' to 'text' without success so far. Below is the code snippet:
const [showPassword, setShowPassword] = useState(false)
const passwordRef = useRef<HTMLInputElement>(null);
const handleShowPassword = (ref: React.RefObject<HTMLInputElement>) => {
if (ref.current && ref.current.id === 'password') {
setShowPassword((prev) => !prev);
if (showPassword) {
ref.current!.type = "password";
console.log('passwordRef.current?.type: ', ref.current?.type); // password
} else {
ref.current!.type = "text";
console.log('passwordRef.current?.type: ', ref.current?.type); // text
}
}
};
return (
<Container>
<BackgroundBox />
<FormBox>
{/* Password */}
<div className='auth-input-container login-password'>
<FaKey className="auth-icon" size='20px' />
<input
type="password"
id="password"
name="password"
placeholder="Enter password"
className="auth-input"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.password}
ref={passwordRef}
/>
{
showPassword ? <FaEyeSlash className="auth-icon-password-eye" onClick={() => handleShowPassword(passwordRef)} />
: <FaEye className="auth-icon-password-eye" onClick={() => handleShowPassword(passwordRef)} />
}
</div>
{formik.touched.password && formik.errors.password ? (
<div className="error-message">{formik.errors.password}</div>
) : null}
// and closing tags
Even though the types logged within handleShowPassword correctly show 'text' or 'password', the actual passwordRef type stubbornly remains 'text'. Strangely, when using Vanilla JS instead of refs:
const handleShowPassword = (ref: React.RefObject<HTMLInputElement>) => {
const DOMref = document.getElementById('password') as HTMLInputElement;
if (DOMref.id === 'password') {
console.log('DOMref: ', DOMref);
if (DOMref.type === 'password') {
DOMref.type = 'text'
} else {
DOMref.type = 'password'
}
}
};
This method works flawlessly. Why is this discrepancy occurring? How can I rectify this issue?