Multiple ion-select in same page trigger wrong popup

#1

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!

#2

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
#3

Thank you very much! This solved my issue!

#4

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).

#5

This works for me too. Thanks.