Float label not moving over input in Firefox

[fperezgaliana]

I'm submitting a ... (check one with "x")

[ X ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
After updating to PrimeNG 5.2.5, all the float label inputs in my app stopped moving the label above the input when the user clicks on them. This is how they look now:

Also, I realized that the example on the PrimeNG website does the same:

I've tried this on several computers: Firefox 51 for MacOS, Firefox 57 on Ubuntu 17.10 and Firefox 59 on Ubuntu 17.10 and 18.04. On Google Chrome, it seems to work fine.

Expected behavior
The float label show position itself above the inputs when the user clicked on them. This is an screenshot of the app running on Chrome:

Please tell us about your environment:
I use Ubuntu 18.04 x64. The web server is NG Live Development Server 1.7.4 and Node 9.9.0.

• Angular version: 5.X
  5.2.10

• PrimeNG version: 5.X
  5.2.5

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Firefox 59 on Ubuntu 18.04 x64
  Firefox 59 on Ubuntu 17.10 x64
  Firefox 51 on MacOSX Sierra
  Firefox 57 on Ubuntu 17.10

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  all

• Node (for AoT issues): node --version =
  v9.9.0

[iArnoldo]

I had the same problem in 5.2.3 and prior. I had to write a directive which toggled the class 'ui-state-filled'.

[axinedy]

I have this too label text overlaps the entered text with Firefox in text input field (all ok with Chrome).
But if I add floating label to chips input field - label overlaps input text in both browsers - Firefox and Chrome:
https://imgur.com/a/JTASlh7

[stefalda]

@iArnoldo can you show the code of your directive?
thanks

[jnkb]

Did you forgot to import InputTextModule in the module? (this was the reason for this on my side)

[stefalda]

Nope, as a matter of fact, it works flawlessly with Chrome.
It seems a problem with the CSS... it doesn't detect that the Input is focused or compiled...

[marcoberri]

Hi have the same problem!

Angular version: 5.2.10
PrimeNG version: 5.2.5
FireFox version: 59.03 64bit

[iArnoldo]

@stefalda

import { Directive, OnInit, OnDestroy, ElementRef } from '@angular/core';
import { FormControlName } from '@angular/forms';
import { Subscription } from 'rxjs/Subscription';

@Directive({
  selector: '[loginFormControl]'
})
export class LoginFormDirective {

  valueOfTheForm: Subscription;

  constructor(
    private el: ElementRef,
    private formControlName: FormControlName // Inject FormControlName
  ) {

  }

  ngOnInit() {
    this.valueOfTheForm = this.formControlName.valueChanges.subscribe(value => {

      const inputFields = this.el.nativeElement;
      inputFields.classList.toggle('ui-state-filled', value);

    });
  }
  ngOnDestroy() {
    this.valueOfTheForm.unsubscribe(); 
  }

}

There you go. I hope it helps.

[jnkb]

i have added to my css:

.ui-float-label>input:focus~label,
.ui-float-label>input.ui-state-filled~label,
.ui-float-label>.ui-inputwrapper-focus~label,
.ui-float-label>.ui-inputwrapper-filled~label {
    top: -.75em;
    font-size: 12px;
}

in the original css the additional selector

.ui-float-label>input:-webkit-autofill~label

breaks the whole block in firefox

[stefalda]

@jnkb I confirm your patch works in Firefox...

it seems to work ok even in the latest Chrome.

Will this be merged in the code?

Thanks

[stefalda]

@iArnoldo Thanks for posting the code.