Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: ion-select doesn't work inside a ion-item tag

See original GitHub issue

Bug Report

Current behavior: Implementing a ion-select inside a ion-item tag, but upon clicking, nothing happens. If I remove the ion-item tag, the ion-select works as expected.

It’s confusing because the Docs shows that you can use a ion-select under a ion-item tag.

Expected behavior: I would expect the ion-select to work inside a ion-item tag according to the docs.

Related code:

Works:

<!-- <ion-item> -->
      <ion-label>Gender</ion-label>
      <ion-select placeholder="Select One">
        <ion-select-option value="f">Female</ion-select-option>
        <ion-select-option value="m">Male</ion-select-option>
      </ion-select>
    <!-- </ion-item> -->

    <!-- <ion-item> -->
      <ion-label>Hair Color</ion-label>
      <ion-select value="brown" okText="Okay" cancelText="Dismiss">
        <ion-select-option value="brown">Brown</ion-select-option>
        <ion-select-option value="blonde">Blonde</ion-select-option>
        <ion-select-option value="black">Black</ion-select-option>
        <ion-select-option value="red">Red</ion-select-option>
      </ion-select>
    <!-- </ion-item> -->

Doesn’t work:

<ion-item>
      <ion-label>Gender</ion-label>
      <ion-select placeholder="Select One">
        <ion-select-option value="f">Female</ion-select-option>
        <ion-select-option value="m">Male</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label>Hair Color</ion-label>
      <ion-select value="brown" okText="Okay" cancelText="Dismiss">
        <ion-select-option value="brown">Brown</ion-select-option>
        <ion-select-option value="blonde">Blonde</ion-select-option>
        <ion-select-option value="black">Black</ion-select-option>
        <ion-select-option value="red">Red</ion-select-option>
      </ion-select>
    </ion-item>

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.13 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Utility:

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

System:

   NodeJS : v12.13.0
   npm    : 6.13.4
   OS     : macOS Mojave

Issue Analytics

State:
Created 4 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

liamdebeasicommented, Jan 10, 2020

Thanks for the follow up. I created a reproduction of the same issue without using any Ionic components: https://codepen.io/liamdebeasi/pen/zYxjvdw

It looks like it has something to do with particular CSS being applied to interactive elements in the Shadow DOM. I am going to close this as this does not appear to be a bug in Ionic Framework; however, we will look into reporting this issue to the Firefox team. Thanks!

0reactions

liamdebeasicommented, May 28, 2020

Hey there, I filed a bug with the Firefox team: https://bugzilla.mozilla.org/show_bug.cgi?id=1640189. Looks like this has been fixed in Firefox 78, so a fix should be available whenever that ships.