Skip to content

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

@Qrysto

Description

@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

Image

Operating System Version

Windows 11

Browser

Chrome

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions