FloatLabel: Incorrect position when using browser autofill

[andreiGadjylaJS]

Describe the bug

Good afternoon. When you click on the label field, it works correctly. But when choosing a value from the drop-down list provided by the browser (previously entered value in the field), the label moves to the top, when choosing a value from previously entered values, the label remains in the wrong place, but when changes are made to the field, the label returns to its place.

Reproducer

https://codesandbox.io/s/naughty-poincare-5sxfrq?file=/src/demo/InputTextDemo.tsx

PrimeReact version

8.1.0

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome 101.0.4951.67

Steps to reproduce the behavior

1. Focus on the InputText field
2. Select a value from previously entered values (the list is provided by the browser)
3. Select the previously entered value

Expected behavior

When working with the InputText field, its label was placed at the place specified for it, and did not change position when entering data into this field

[andreiGadjylaJS]

[andreiGadjylaJS]

[melloware]

The problem is this:

.p-float-label input:-webkit-autofill ~ label {
    top: -20px;
    font-size: 12px;
}

For some reason when using webkit-autofill its adding -20px to top instead of the normal -0.75rem when NOT using autofill?

[melloware]

As a workaronud just add this CSS to your custom CSS of your project:

.p-float-label input:-webkit-autofill ~ label {
  top: -0.75rem;
  font-size: 12px;
}

[andreiGadjylaJS]

Thanks.