Open
Description
React version: 17, 18, 19 (didn't test older version)
Additional info
Google Chrome: 133.0.6943.142 (Official Build) (x86_64)
OS: macOS Version 12.6 (Build 21G115)
Steps To Reproduce
- Create the new project with any build tool or framework
- Create the component with this content
import { useState } from 'react'
const LoginForm = () => {
const [email, setEmail] = useState('');
return (
<form>
<input name="email" value={email} onChange={e=>setEmail(e.currentTarget.value)} />
{email && <button type='button'>clear</button>}
<input name="password" type='password' />
<button type='submit'>submit</button>
</form>
);
};
function App() {
const [showLoginForm, setShowLoginForm] = useState(false)
return (
<div>
<button onClick={() => setShowLoginForm((value) => !value)}>
toggle
</button>
{showLoginForm && <LoginForm />}
</div>
)
}
export default App- Serve the app
- Go to this page, click toggle button to show login form, chrome will autofill if you already have saved info
- Trying to select email or password field
The current behavior
User cant select the fields
The expected behavior
User should have to select the fields
For the more, I try to create minimal version on vanila js to make sure this is not chrome bug
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Form</title>
</head>
<body>
<div>
<button id="toggle-button">Toggle</button>
<div id="login-form" style="display: none">
<form>
<input id="email" name="email" placeholder="Email" />
<button type="button" id="clear-button" style="display: none">
Clear
</button>
<input name="password" type="password" placeholder="Password" />
<button type="submit">Submit</button>
</form>
</div>
</div>
<script>
document
.getElementById("toggle-button")
.addEventListener("click", function () {
const loginForm = document.getElementById("login-form");
loginForm.style.display =
loginForm.style.display === "none" ? "block" : "none";
});
const emailInput = document.getElementById("email");
const clearButton = document.getElementById("clear-button");
emailInput.addEventListener("input", function () {
if (emailInput.value) {
clearButton.style.display = "inline";
} else {
clearButton.style.display = "none";
}
});
clearButton.addEventListener("click", function () {
emailInput.value = "";
clearButton.style.display = "none";
});
</script>
</body>
</html>
Or if we remove the line {email && <button type='button'>clear</button>} we can't see the bug
The videos:
React(bug): https://github.com/user-attachments/assets/f6ff92bb-7044-4b8b-b53d-da3aca8dff20
VanilaJS(without bug): https://github.com/user-attachments/assets/f2dc1dd2-f67a-4616-876c-dddcb1df6228