Browser autocomplete in <SignIn /> and <SignUp /> causes first click on auth buttons and anywhere in the component to be ignored

[vogdev]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://github.com/clerk/nextjs-auth-starter-template

Publishable key

pk_test_ZXRoaWNhbC1jb2xsaWUtNDMuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

Issue with the and components from @clerk/nextjs. If the browser auto-fills the email and password inputs, the first click on any element within the component (e.g., SignUp button) is ignored. After the password input is rendered, clicking on any element inside the component that has shifted position due to the password field appearing results in the click being ignored.

d.mov

Environment

System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 1.46 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.4 - /opt/homebrew/opt/node@18/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.7.0 - /opt/homebrew/opt/node@18/bin/npm
    pnpm: 9.10.0 - /opt/homebrew/bin/pnpm
    Watchman: 2024.07.15.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 130.1.71.121
    Chrome: 130.0.6723.93
    Safari: 18.0.1
  npmPackages:
    @clerk/nextjs: 6.0.2 => 6.0.2
    @types/node: ^20.11.0 => 20.17.6
    @types/react-syntax-highlighter: ^15.5.11 => 15.5.13
    autoprefixer: ^10.4.16 => 10.4.20
    clsx: ^2.1.1 => 2.1.1
    next: 15.0.2 => 15.0.2
    postcss: ^8.4.33 => 8.4.47
    prism-react-renderer: ^2.3.1 => 2.4.0
    react: 19.0.0-rc-02c0e824-20241028 => 19.0.0-rc-02c0e824-20241028
    react-dom: 19.0.0-rc-02c0e824-20241028 => 19.0.0-rc-02c0e824-20241028
    react-syntax-highlighter: ^15.5.0 => 15.6.1
    tailwindcss: ^3.4.1 => 3.4.14
    types-react:  19.0.0-rc.1
    types-react-dom:  19.0.0-rc.1
    typescript: ^5.3.3 => 5.6.3

[clerk-cookie]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.