IOS floating label in ion item blocks ion select from triggering

[voltairebiton]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

Floating ion label is blocking ion select from triggering when tapped on ios only. Expected behavior:

It should trigger the ion-select on tap and opens a modal for selecting items.

Steps to reproduce:

Just add this code to a blank ionic 4 app. `

<ion-item>
  <ion-label position="floating">Select</ion-label>
  <ion-select>
    <ion-select-option value="nes">NES</ion-select-option>
    <ion-select-option value="n64">Nintendo64</ion-select-option>
    <ion-select-option value="ps">PlayStation</ion-select-option>
    <ion-select-option value="genesis">Sega Genesis</ion-select-option>
    <ion-select-option value="saturn">Sega Saturn</ion-select-option>
    <ion-select-option value="snes">SNES</ion-select-option>
  </ion-select>
</ion-item>

` Then run on ios. try tapping on the floating label. it will not trigger the select. however if you tap outside the range of label it will work. On android this is working perfectly.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.3.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

System:

   NodeJS : v10.13.0 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS

[liamdebeasi]

Hi there,

Thanks for opening an issue with us! Would you be able to provide a repository with the code required to reproduce this issue? Thanks!

[voltairebiton]

Hi @liamdebeasi here is the test repo. Just run npm run build to do all installs. then run it on any iphone device. try tapping it on the placeholder and it will not trigger any event.

[liamdebeasi]

Thanks for sending this over! I am not seeing the issue you are describing. To confirm, you are experiencing the select dialog not opening when tapping Select?

[voltairebiton]

yes that's correct. When i checked with safari inspector, the label is blocking it. So when i tap outside the range of the label it will open up the dialog. In android it is working fine. For now i changed my label to stacked temporarily. I will revert it back to floating if it becomes fine.

[liamdebeasi]

Thanks for the additional information. Which version of iOS were you testing on?

[voltairebiton]

its ios 12.1. swift language version is 4.2

[liamdebeasi]

Hi there,

I am still not able to reproduce the issue you are seeing. Here is what I can see on my end:

1. Tapping the "Select" before any option is selected works fine
2. Tapping the floating "Select" after an option is selected works fine
3. Tapping the selected option text works fine

Can you try running this app without Capacitor (use: https://github.com/ionic-team/cordova-plugin-ionic-webview instead) and see if you are still running into the same issue?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. 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.

Thank you for using Ionic!