PrimeNG v18.0.0-beta.3 : Float Labels are broken

[mplgn]

Describe the bug

When using float labels with a component, upon focus, the label is rendered inside of the field instead above the field. This was working in beta.2.

beta 3 (broken):

https://github.com/user-attachments/assets/71e2191b-c470-4137-8705-a8a4b5d3a213

https://stackblitz.com/edit/stackblitz-starters-yughkb?file=src%2Fapp%2Fapp.component.ts

beta 2 (working):

https://github.com/user-attachments/assets/454864b5-371f-44a0-9ae6-af52ccfb24fa

https://stackblitz.com/edit/stackblitz-starters-frrlho?file=src%2Fapp%2Fapp.component.html

Environment

macOS Sonoma 14.6.1 Angular 18.0.0

NOTE: details below refer to my reproduction of the issue in Stackblitz. However, I've also been able to reproduce this with Angular 18.2.0 and Node 20.17.0.

Reproducer

https://stackblitz.com/edit/stackblitz-starters-yughkb?file=src%2Fapp%2Fapp.component.html

Angular version

18.0.0

PrimeNG version

18.0.0-beta.3

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.20.3

Browser(s)

No response

Steps to reproduce the behavior

1. Start a new Angular v18 project;
2. Install PrimeNG 18.0.0-beta.3 (npm install [email protected])
3. In app.component.html, place an InputText component that is configured with a FloatLabel

      <p-floatlabel>
        <input pInputText id="username" />
        <label for="username">Text</label>
      </p-floatlabel>

4. Run the app
5. Click on InputText field
6. Observe float label is rendered inside of the field instead of above it

Expected behavior

I expected the float label to be rendered above the input field, as it has been in prior versions of PrimeNG (including 18.0.0-beta.2).

[jicedtea]

FloatLabel work with Aura theme, completely broken with Lara and Nora theme. Even the example on their home page is broken. https://v18.primeng.org/floatlabel It seems that with primeng there is no such thing as stability. Everything can break with each new release.

[jicedtea]

It's been almost a month and this bug is still not fixed. If primetek releases v18 rc but this bug is still there, it will be really crazy.

[mertsincan]

Unfortunately, I couldn't replicate it in https://v18.primeng.org/floatlabel Am I missing something? I tested it with all presets.

[github-actions[bot]]

More information is needed to find a solution. A runnable StackBlitz example and additional details would be helpful.

[github-actions[bot]]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles:

[github-actions[bot]]

More information is needed to find a solution. A runnable StackBlitz example and additional details would be helpful.

[mplgn]

This is now working in v18.0.0-rc.2, so this issue can be closed.