Bug: Chrome autofill made the text field can't select #32516

NamPNQ · 2025-03-04T15:43:56Z

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

The text was updated successfully, but these errors were encountered:

NamPNQ added the Status: Unconfirmed label Mar 4, 2025

NamPNQ changed the title ~~Bug: Chrome autofill made the text filed can't select~~ Bug: Chrome autofill made the text field can't select Mar 4, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug: Chrome autofill made the text field can't select #32516

Bug: Chrome autofill made the text field can't select #32516

NamPNQ commented Mar 4, 2025 •

edited

Loading

Bug: Chrome autofill made the text field can't select #32516

Bug: Chrome autofill made the text field can't select #32516

Comments

NamPNQ commented Mar 4, 2025 • edited Loading

Steps To Reproduce

The current behavior

The expected behavior

NamPNQ commented Mar 4, 2025 •

edited

Loading