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

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>

edited Nov 12 '18 at 7:45

Suraj Rao

22.8k75469

asked Nov 12 '18 at 6:29

Abhee

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
Nov 12 '18 at 7:41

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
Nov 29 '18 at 15:07

add a comment |

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

edited Nov 12 '18 at 7:45

Suraj Rao

22.8k75469

asked Nov 12 '18 at 6:29

Abhee

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
Nov 12 '18 at 7:41

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
Nov 29 '18 at 15:07

add a comment |

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

edited Nov 12 '18 at 7:45

Suraj Rao

22.8k75469

asked Nov 12 '18 at 6:29

Abhee

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

ionic-framework ionic3 hybrid-mobile-app

edited Nov 12 '18 at 7:45

Suraj Rao

22.8k75469

asked Nov 12 '18 at 6:29

Abhee

edited Nov 12 '18 at 7:45

Suraj Rao

22.8k75469

asked Nov 12 '18 at 6:29

Abhee

edited Nov 12 '18 at 7:45

Suraj Rao

22.8k75469

edited Nov 12 '18 at 7:45

Suraj Rao

22.8k75469

edited Nov 12 '18 at 7:45

Suraj Rao

22.8k75469

asked Nov 12 '18 at 6:29

Abhee

asked Nov 12 '18 at 6:29

Abhee

asked Nov 12 '18 at 6:29

Abhee

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
Nov 12 '18 at 7:41

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
Nov 29 '18 at 15:07

add a comment |

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
Nov 12 '18 at 7:41

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
Nov 29 '18 at 15:07

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
Nov 12 '18 at 7:41

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
Nov 29 '18 at 15:07

add a comment |

1 Answer
1

active

oldest

votes

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

answered Nov 12 '18 at 10:06

Harry

1485

This may work if i create any modalpage but here im using ion-select pop-over. this is not working for ion-select I tried using @ViewChild('myselect') select: Select; and in ionWillLeave I am closing this.select.close(); this is working fine. But I have select field based on some condition , those select fields are not working if use @viewchild and getting error as undefined. Please help
– Abhee
Nov 29 '18 at 15:02

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256923%2fion-select-popover-interface-is-not-getting-hidden-on-hardware-back-button-actio%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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

answered Nov 12 '18 at 10:06

Harry

1485

This may work if i create any modalpage but here im using ion-select pop-over. this is not working for ion-select I tried using @ViewChild('myselect') select: Select; and in ionWillLeave I am closing this.select.close(); this is working fine. But I have select field based on some condition , those select fields are not working if use @viewchild and getting error as undefined. Please help
– Abhee
Nov 29 '18 at 15:02

add a comment |

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

answered Nov 12 '18 at 10:06

Harry

1485

This may work if i create any modalpage but here im using ion-select pop-over. this is not working for ion-select I tried using @ViewChild('myselect') select: Select; and in ionWillLeave I am closing this.select.close(); this is working fine. But I have select field based on some condition , those select fields are not working if use @viewchild and getting error as undefined. Please help
– Abhee
Nov 29 '18 at 15:02

add a comment |

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

answered Nov 12 '18 at 10:06

Harry

1485

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

answered Nov 12 '18 at 10:06

Harry

1485

answered Nov 12 '18 at 10:06

Harry

1485

answered Nov 12 '18 at 10:06

Harry

1485

answered Nov 12 '18 at 10:06

Harry

1485

This may work if i create any modalpage but here im using ion-select pop-over. this is not working for ion-select I tried using @ViewChild('myselect') select: Select; and in ionWillLeave I am closing this.select.close(); this is working fine. But I have select field based on some condition , those select fields are not working if use @viewchild and getting error as undefined. Please help
– Abhee
Nov 29 '18 at 15:02

add a comment |

This may work if i create any modalpage but here im using ion-select pop-over. this is not working for ion-select I tried using @ViewChild('myselect') select: Select; and in ionWillLeave I am closing this.select.close(); this is working fine. But I have select field based on some condition , those select fields are not working if use @viewchild and getting error as undefined. Please help
– Abhee
Nov 29 '18 at 15:02

This may work if i create any modalpage but here im using ion-select pop-over. this is not working for ion-select I tried using @ViewChild('myselect') select: Select; and in ionWillLeave I am closing this.select.close(); this is working fine. But I have select field based on some condition , those select fields are not working if use @viewchild and getting error as undefined. Please help
– Abhee
Nov 29 '18 at 15:02

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb