Multiple selects on the same page share the same options

I have posted an issue but thought I’d see if anyone else has experienced it and perhaps knows some workaround.

I have a page with 2 selects, where they both pick up the options from the seconds instance. Even a simple example exhibits this as can be seen here

Has anyone else come across this and perhaps know a workaround?

Cheers in advance.

Putting them in a list fixes it

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-select>
        <ion-option>A1</ion-option>
        <ion-option>A2</ion-option>
      </ion-select>
    </ion-item>
    <ion-item>
      <ion-select>
        <ion-option>B1</ion-option>
        <ion-option>B2</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>
</ion-content>

It’s because their “hitbox” is behaving a bit odd it seems, and the second select basically covers the first one.

1 Like

Great, thanks for that!