ionic-framework: bug: ion-label not floating inside ion-item with select input on ion-modal dialog

Prequisites

I have read the Contributing Guidelines.
I agree to follow the Code of Conduct.
I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v4.x
v5.x
v6.x

Current Behavior

ion-label not floating inside ion-item with select input on ion-modal dialog, label overlay the select field value. Selecting a new value fix the overlay bug, however, it comes back reopening the dialog. The bug not exists on modeless views.

2021-08-24_16-22-33

Expected Behavior

Floating ion-label not overlay on select fields in both normal and ion.modal view.

Steps to Reproduce

Create a modal and open a modal with an ion-label with floating prop with an ion-select.

<ion-item> <ion-label color="primary" position="floating">Posizione </ion-label> <ion-select multiple="false" formControlName="nascSesso" [(ngModel)]="this.entita.Collaboratore.Anagrafica.NascSesso" [cancelText]="this.translateService.instant('component.select.cancelText')" ok-text="Ok"> <ion-select-option *ngFor="let item of this.tipoSesso | keys" [value]="item.key"> {{ 'Youpass.model.anagrafica.EnumSesso.' + item.value | translate }}</ion-select-option> </ion-select> </ion-item>

Code Reproduction URL

https://github.com/olaisen81/ion-label-issue

Ionic Info

2021-08-24_16-24-22

Additional Information

No response

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 18 (6 by maintainers)

Most upvoted comments

After some discussion with the Angular team, this looks like something we need to address inside of Ionic: https://github.com/angular/angular-cli/issues/21682

Ionic was leveraging a defect in zone.js which caused async operations to not be intercepted, resulting in this issue. It was technically an issue before this thread was opened, but we never noticed it until now because native async/await was not previously downlevelled.

I will look into a fix soon.

liamdebeasi on Sep 30, 2021

I applied a workaround to this problem for now, After setting the value of the select if you add “item-has-value” class to parent item element of the select in a setTimeout function, the things works somehow as expected.

@ViewChild(‘item’, { static: false }) item: any; … setTimeout(() => { this.item.el.classList.add(‘item-has-value’);
}, 100);

 <ion-item #item>
  <ion-label position="floating">
              label
            </ion-label>
            <ion-select></ion-select>
</ion-item>

a2kan on Dec 14, 2021

This fix was released in 6.0.15: https://github.com/ionic-team/ionic-framework/blob/main/CHANGELOG.md#6015-2022-04-06

liamdebeasi on May 4, 2022

Hello everyone, I have an updated dev build that solves the issue with less intense modifications.

Can someone validate with:

6.0.12-dev.11647441819.18de4788

This should work for both ngModel and reactive form usages.

sean-perkins on Mar 16, 2022

Thanks! This behavior change looks to be caused by @angular-devkit/build-angular@12.2.1 or newer. I have reported this issue to the Angular team here: https://github.com/angular/angular-cli/issues/21682

I will update this thread when I have more information. For now, you can work around this by staying on @angular-devkit/build-angular@12.2.0.

liamdebeasi on Aug 31, 2021