Multiple ion-select in same page trigger wrong popup

Hi,

i have a strange issue regarding multiple ion-select controls on the same page:

I just copied the doc’s gaming-sample-select into my page and created the appropriate binding variable in my typescript class.

The first thing a noticed was, that, no matter where i click in the page, the popup gets triggered.
Something already noticed in this thread: Ion-select triggering on whole-view..(activating on click anywhere)

Then i carried on duplicating the ion-select, binding it to a different variable in the typescript class and now things stopped being fun because no matter which ion-select i clicked, the popup showed only for the second one.

This is my HTML:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>List</ion-title>

  </ion-navbar>
</ion-header>

<ion-content>
   <ion-select [(ngModel)]="gaming" interface="popover">
      <ion-option value="nes">NES</ion-option>
      <ion-option value="n64">Nintendo64</ion-option>
      <ion-option value="ps">PlayStation</ion-option>
      <ion-option value="genesis">Sega Genesis</ion-option>
      <ion-option value="saturn">Sega Saturn</ion-option>
      <ion-option value="snes">SNES</ion-option>
    </ion-select>

  
    <ion-select [(ngModel)]="gaming2" interface="popover">
      <ion-option value="nes">NES</ion-option>
      <ion-option value="n64">Nintendo64</ion-option>
      <ion-option value="ps">PlayStation</ion-option>
      <ion-option value="genesis">Sega Genesis</ion-option>
      <ion-option value="saturn">Sega Saturn</ion-option>
      <ion-option value="snes">SNES</ion-option>
    </ion-select>
</ion-content>

And this is my typescript class:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-list',
  templateUrl: 'list.html'
})
export class ListPage {
  gaming: string = "snes";
  gaming2: string = "ps";
  

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  
  }

}

The styles are empty.

Thank you very much for your help!

Hi, I’m no expert (still learning my way through ionic2) but had the same issue and could solve it just wrapping both ion-select elements in ion-item tags.
Like so:

<ion-item>
  <ion-select>
    <ion-option></ion-option>
    ... more options ...
    </ion-select>
</ion-item>
<ion-item>
  <ion-select>
    <ion-option></ion-option>
    ... more options ...
    </ion-select>
</ion-item>

Hope this helps …

7 Likes

Thank you very much! This solved my issue!

Another (less desirable?) way to fix this is to change ion-select and ion-option to just select and option. You lose the pop-up radio button selector and get a regular web-page drop-down. Test on a phone (or labs) if you go this route. I wanted to add an indicator next to the select, and was very frustrated until I removed the ion-item tags (then I got the above problem).

This works for me too. Thanks.