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

[olaisen81]

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.

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

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[olaisen81]

Ok, i've reproduced the bug upgrading angular to the latest version (12.2.2). With angular@12.1.5 the bug is not reproducing.
You can check the issue in my Github repo at https://github.com/olaisen81/ion-label-issue, launch apps and click Show Modal button on Inbox page.

[liamdebeasi]

Thanks! Are you able to provide a reproduction of this working in Angular 12.1?

[olaisen81]

Hi Liam! The same repository ( https://github.com/olaisen81/ion-label-issue) now have 2 branches, one named angular@latest and one angular@12.1.5, you can test now working and bugging version. Thanks for your reply!

[liamdebeasi]

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: angular/angular-cli#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.

[olaisen81]

Great! Thanks Liam. I still reproduce the bug trying to use @angular-devkit/build-angular@12.2.0 on android, instead it works launching app on browser. I'm looking forward for bug fix news.

[liamdebeasi]

After some discussion with the Angular team, this looks like something we need to address inside of Ionic: angular/angular-cli#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.

[ptmkenny]

I'm seeing the same issue with Ionic v6 rc1 and React 17.0.2.

Example component (...register is react-hook-form):

  <IonItem>
    <IonLabel position="floating">
      My label
    </IonLabel>
    <IonSelect
      {...register('subPeriod', { required: true })}
      id="edit-my-form-field"
    >
      <IonSelectOption value="monthly">Monthly</IonSelectOption>
      <IonSelectOption value="annual">Annual</IonSelectOption>
      <IonSelectOption value="cancel">Cancel</IonSelectOption>
    </IonSelect>
  </IonItem>

[abdel-ships-it]

After some discussion with the Angular team, this looks like something we need to address inside of Ionic: angular/angular-cli#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.

Hey there, any upgrades on this fix ? 👍

[olaisen81]

Unfortunately not yet.

[a2kan]

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>

[sean-perkins]

Could someone that has encountered this issue in their application, please try with this dev build:

npm install @ionic/angular@6.0.0-dev.1641314109.170f765

and let me know if you notice any side effects? I've tested with the reproduction application and it appears to solve the visual issues.

Thanks!

[WolfWalter]

Could someone that has encountered this issue in their application, please try with this dev build:

npm install @ionic/angular@6.0.0-dev.1641314109.170f765

and let me know if you notice any side effects? I've tested with the reproduction application and it appears to solve the visual issues.

Thanks!
Hi @sean-perkins,
I tired to use that version, but I got errors for every use of ngModel in my application:

[ng] Error: src/app/settings/settings.page.html:99:27 - error NG8007: The property and event halves of the two-way binding 'ngModel' are not bound to the same target.
[ng]             Find more at https://angular.io/guide/two-way-binding#how-two-way-binding-works
[ng] 
[ng] 99             <ion-toggle [(ngModel)]="changeInstallerRequestNotifications"></ion-toggle>
[ng]                              ~~~~~~~
[ng] 
[ng]   node_modules/@ionic/angular/directives/control-value-accessors/boolean-value-accessor.d.ts:4:22
[ng]     4 export declare class BooleanValueAccessorDirective extends ValueAccessor {
[ng]                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng]     The property half of the binding is to the 'BooleanValueAccessorDirective' component.
[ng]   node_modules/@angular/forms/forms.d.ts:3617:22
[ng]     3617 export declare class NgModel extends NgControl implements OnChanges, OnDestroy {
[ng]                               ~~~~~~~
[ng]     The event half of the binding is to the 'NgModel' component.
[ng]   src/app/settings/settings.page.ts:25:16
[ng]     25   templateUrl: './settings.page.html',
[ng]                       ~~~~~~~~~~~~~~~~~~~~~~
[ng]     Error occurs in the template of component SettingsPage.

[sean-perkins]

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.

[filipencus]

Hi @sean-perkins
Do you know when this fix will be available for production?
I checked all Ionic release history and I don't see anything about it. Thanks.

[liamdebeasi]

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

[filipencus]

Thanks for the info @liamdebeasi

[ionitron-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.