Skip to content

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

Open
@NamPNQ

Description

@NamPNQ

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

  1. Create the new project with any build tool or framework
  2. 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
  1. Serve the app
  2. Go to this page, click toggle button to show login form, chrome will autofill if you already have saved info
  3. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions