Ionic 4: ion-select doesn't work well on IOS

Ionic Framework ionic-v3
1

When on IOS, ion-select doesn’t trigger choices when tapping on it. It does so when tapping on its boundaries / borders.

An example of faulty code :

              <ion-list>
                <ion-item no-padding>
                  <ion-label position="floating">{{'GENDER' | translate}}</ion-label>
                  <ion-select formControlName="gender">
                    <ion-select-option value="male">{{"MALE" | translate}}</ion-select-option>
                    <ion-select-option value="female">{{"FEMALE" | translate}}</ion-select-option>
                  </ion-select>
                </ion-item>
              </ion-list>

Am I missing something ?

2

Still need for help on that one

3

it’s the position=“floating” in the label that’s doing it. I have no idea why but if you remove it it’ll work as expected

    <ion-list>
      <ion-item no-padding>
        <ion-label>{{'GENDER'}}</ion-label>
        <ion-select formControlName="gender">
          <ion-select-option value="male">{{"MALE" }}</ion-select-option>
          <ion-select-option value="female">{{"FEMALE"}}</ion-select-option>
        </ion-select>
      </ion-item>
    </ion-list>
1 Like
4

Oh, really ??? I will try it when I get home, thanks !

5

Worked, you’re the real deal, heh !

6

I’ve added “pointer-events: none” to label so it doesn’t catch touches.

<ion-item>
    <ion-label style="pointer-events: none" position="floating">Select something</ion-label>
    <ion-select>
        <ion-select-option value="1">First option</ion-select-option>
    </ion-select>
</ion-item>

This approach can be used for another issue: when you have ion-item with ion-input which is readonly (to show some value) and touch on item should open some popover. Problem with this setup is that it needs 2 touches to work. First touch just takes focus and then second opens popover. But if label and input don’t catch events then it works.

<ion-item (click)="SomeItemAction()" button>
    <ion-label style="pointer-events: none" position="floating">Some floating label</ion-label>
    <ion-input style="pointer-events: none" readonly [(ngModel)]="someValue"></ion-input>
</ion-item>

Of course you can put the “pointer-events: none” clause in .label-floating CSS class to make it default for all position=“floating” labels, or in any other used CSS class. These code examples are just for fast pinpointing of the solution.
Hope this helps.

1 Like