bug: ion-select / ion-label not displayed properly with attribute floating

#19712 Bug Report

Ionic version: [x] **4.11.3

Current behavior: When using ion-select inside and ion-item, the ion-label (with floating attribute) is displayed on top of the selected value of the ion-select

Expected behavior: The label shall be displayed with small font upper

Related code:

        <ion-item>
          <ion-label position="floating">Event Game</ion-label>
          <ion-select [(ngModel)]="selectedGame.key" (ionChange)="onChangeGame()">
            <ion-select-option *ngFor="let game of gameLst" [value]="game.key">{{game.value}}</ion-select-option>
          </ion-select>
        </ion-item>

Here is a project showing the issue: https://github.com/eltoky/tstSelect

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.6 (/Users/x/.nvm/versions/node/v10.16.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.3
   @angular-devkit/build-angular : 0.802.2
   @angular-devkit/schematics    : 8.3.17
   @angular/cli                  : 8.3.17
   @ionic/angular-toolkit        : 2.1.1

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res : not installed
   native-run  : 0.2.7 (update available: 0.2.9)

System:

   NodeJS : v10.16.0 (/Users/x/.nvm/versions/node/v10.16.0/bin/node)
   npm    : 6.13.0
   OS     : macOS Mojave
   Xcode  : Xcode 11.2.1 Build version 11B500

[olaisen81]

Hi, i’ve got the same issue with latest angular (12.2.2) and ionic (5.6.14) version, any update or fix? For now i resolved applying item-has-value class to item parent element, but it’s a temporary workaround:

ngAfterViewInit(): void { this.ionSelectPosizione.el.parentElement.classList.add("item-has-value"); }

[Giwayume]

@brandyscarney

Here’s a simple 20 line reproduction on the latest version 5.6.4, vanilla Javascript, no Angular involved here.

https://jsfiddle.net/e2t31qaw/

The order of events matters. What seems to cause this bug specifically is:

1. Initializing the ion-select (doesn’t matter what options/values are passed).
2. Waiting an arbitrary amount of time, in this case 100ms.
3. Clearing out the list of options on the ion-select (if there are any). select.innerHTML = '';
4. Setting the “value” attribute on the “ion-select” before any options are added. select.setAttribute('value', 'option1');
5. Creating the ion-select-option elements and appending them to the ion-select afterwards.

The jsfiddle link above shows this: