Multiple ion-select in same page trigger wrong popup

@MarkusStrobl wrote:

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: https://forum.ionicframework.com/t/ion-select-triggering-on-whole-view-activating-on-click-anywhere/86772

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!

Posts: 1

Participants: 1

Read full topic