Ion-select triggering on whole-view..(activating on click anywhere)

#1

wherever we click on the ion-content, ion-select is activating.

<ion-grid>
        <ion-row>   
          <ion-select class="myCustomSelect" [(ngModel)]="gaming" (ionChange)="optionsFn();">
            <ion-option *ngFor="let p of pages" value={{p.code}}>{{p.title}}</ion-option>
          </ion-select>    
        </ion-row>
        <ion-row>
          <form [formGroup]="authForm" (ngSubmit)="openFilters()">
            <ion-item>
            <ion-input type="tel" formControlName="tel" [(ngModel)]="gaming2" placeholder="Username" minlength="8" maxlength="10" required></ion-input>
            </ion-item>
            <button ion-button secondary round [disabled]="!authForm.valid">Light Outline</button>
          </form>
        </ion-row>
    </ion-grid>

in .ts file,
this.pages = [
{
“title”: “Afghanistan”,
“code”: “+93”,
“identity”: “AF”
},{
“title”: “Aland Islands”,
“code”: “+358”,
“identity”: “AX”
}]

I have checked both on browser and android device. Same issue. What am I doing wrong? Please help me…

Multiple ion-select in same page trigger wrong popup
#2

What happens if you change from <ion-grid>/<ion-row> to <ion-list>/<ion-item>?

#3

I tried it and still <ion-select> is triggering on touch

#4

I just came across this problem as well. What I did to fix it was to add this the page’s scss

.item-cover {
width: 0;
height: 0;
}

16 Likes
#5

perfect… saved my time