Ionic-framework: [4.2.0] bug: ion-datetime floating label always floats even without a value when in a formgroup

[RobbHerman]

Bug Report

Ionic version:


[x] 4.x
4.2.0

Current behavior:

When in a formgroup, label always floats on an ion-datetime field when no value

Expected behavior:

does not float when no value
Steps to reproduce:

Related code:

insert short code snippets here

Other information:

Ionic info:

insert the output from ionic info here

[amunoz20]

I can confirm this is happening. The ion-item has the class "item-has-value" even when theres no value on the input.

Any ideas for a workaround?

EDIT:
I made a workaround that is definitelly not recommended...

In your HTML set an ID to reference the item.
<ion-item #dateInput [ngClass]="{'item-has-value': startDate.value}"> <ion-label position="floating">Date</ion-label> <ion-datetime display-format="DDD DD, MMMM" [min]="minDate" [max]="maxDate" formControlName="startDate" [monthNames]="monthNames" [monthShortNames]="monthShortNames" [dayNames]="dayNames" [dayShortNames]="dayShortNames" (ionChange)="onDateSelected($event)"> </ion-datetime> </ion-item>

Then declare a @ViewChild to manipulate the element in the controller like so
@ViewChild('dateInput') dateInput: any; public startDate: FormControl;

Finally use the Angular Life Cycle AfterViewChecked to remove the '.item-has-value'
ngAfterViewChecked() { if (!this.startDate.value) { this.renderer.removeClass(this.dateInput.el, 'item-has-value'); } }

Do consider that AfterViewChecked is pretty powerful and occur many times, in order to reduce performance impact, theres an if statement that blocks the procedure if the control has a value.

Hope this helps for now, but strongly request an official fix to this issue.
Goodluck!

[dylan-westbury]

Here is a screenshot of the issue, label floats without value for datetime

[kelvindart]

I think this is because hasValue() in the ion-datetime always returns true, regardless of whether the control actually has a value. As a result, the class item-has-value is added to the ion-item. This controls the floating label and displays it differently to an empty control.

I had a similar bug, since I style my controls based on whether they have a value or not. As a result, I dug a big deeper, then raised a bug around my issue: #18540 and a PR for a fix: #18541.

Hopefully the guys at Ionic will merge this in soon 🙂.

[liamdebeasi]

Hi there,

This issue has been resolved and will be in the next release of Ionic.

Thanks!

[cparkinsonMYCM]

How is it that this was an issue in 3.x #11547 also and was resolved, and then _the exact same issue_ is present in 4.x..?

Is there a planned date for release of this fix?

[liamdebeasi]

@cparkinsonMYCM,

This bug has already been fixed and will be in the next release of Ionic.

You can visit our release schedule page to get a better idea of how we do releases. We typically release patches every 2 weeks (patches only contain bug fixes): https://ionicframework.com/docs/intro/versioning#release-schedule

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.