[BUG] - Input's label overlapping with autofilled data from Chrome's password manager

[Qrysto]

HeroUI Version

2.8.0-beta.6

Describe the bug

On Chrome, when I have some credentials saved in Chrome's password manager, the browser may prefill the input content for me. But for the HeroUI's Inputs with labelPlacement being inside or outside without placeholder, the label is initially placed in the middle of the Input, overlapping with the prefilled data. See the screenshot below.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create a login page using HeroUI Input components, with name attributes like email and password.
2. Open the login page on Chrome.
3. Submit the form so that Chrome suggests saving the credentials.
4. Accept Chrome's prompt to save credentials.
5. Open the login page again, Chrome will prefill the Input components and it will overlap with the Input labels.

Expected behavior

HeroUI Input should be able to detect when an Input is prefilled and adjust its label position accordingly.

Screenshots or Videos

Operating System Version

Windows 11

Browser

Chrome

[linear[bot]]

ENG-2543 [BUG] - Input's label overlapping with autofilled data from Chrome's password manager

[wingkwong]

please provide a minimal reproducible sandbox so that we could investigate your setup.

[SinghAstra]

hey @wingkwong i needed assistance i wanted to improve UI of landing page for that i intend to write light and dark mode code the problem that i am encountering is where is light and dark mode color pallete defined ? for example in apps/docs/app/layout.tsx there is property bg-background which applies background-color: hsl(var(--heroui-background) / var(--heroui-background-opacity, var(--tw-bg-opacity))); but in what file is --heroui-background defined ?

[jose-matisen]

Yo también tengo ese problema

[Oputo50]

Im also having this issue with any value and any input. It has nothing related to Chrome's password manager.

[jvera852]

Hello, I'm experiencing the same issue with the version compatible with Tailwind CSS v4.

HeroUI Version: 2.8.0-beta.6

Is there any update or fix planned for this?

Thanks in advance!

[jose-matisen]

Hola, que tal, yo pude solucionarlo borrando la carpeta node_modules y colocando el comando npx heroui-cli@latest upgrade --all --beta

Tengo estas versiones "@heroui/react": "^2.8.0-beta.7", "@heroui/system": "^2.4.17-beta.0", "@heroui/theme": "^2.4.17-beta.0", "tailwindcss": "^4.1.8"

[mighty6ft5max]

Same issue. Just using the Input, latest stable version. "autocomplete" is set to "username" and "password" in this screen shot.

[joetakara]

I’m having an issue with TailwindCSS v4

"@heroui/react": "2.8.0-beta.11" "@heroui/input": "^2.4.22"

[wingkwong]

@joetakara @heroui/input@^2.4.22 is not compatible with TW4 . You may either import Input from @heroui/[email protected] or just @heroui/[email protected].