ion-select popover interface is not getting hidden on hardware back button action

Question

I used the popover interface on <ion-select> to display pop-over. In an Android device, if the user taps on ion-select but didn't select any option and click the hardware back button, it moves to the previous view but popover interface is still visible. Please help.

<ion-select interface="popover" [(ngModel)]="item.productType" placeholder="Please select" multiple="false" ionChange="onChange($event)" >
    <ion-option *ngFor="let opt of options" [value]="opt.value">{{opt.label}}</ion-option>
</ion-select>

if user tap on ion-select but didn't select any option are you sure that there is popping after you click ion-select? — nyx97
there is a popping after user select any option from pop over but user just tap on ion-select>>pop-over appears>> click android back button>> pop-over is not popping out.Please help — Abhee

Harry Harry · Accepted Answer · 2018-11-12T10:06:12

Define page name in modal page.

pageName = "ModalPage";

Then register backbutton in app.component.ts

    this.platform.registerBackButtonAction(() => {
        let nav = this.app.getActiveNav();
        let view = nav.getActive().instance.pageName;

        if (view == 'ModalPage') {
            let activeView: ViewController =  nav.getActive();
            activeView.dismiss();
       } else {
          this.nav.pop();
      }
    }

Basically it will register your device backbutton to perform action when particular modal opened.

Feel free to comment for more help :)

ion-select popover interface is not getting hidden on hardware back button action

1 Answers