Ionic-framework: ionViewCanLeave is not working on tabs

[StevenLiSiwei]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
The ionViewCanLeave works on Back Button but not on tabs, you still can navigate freely without any issue. and simply because of the current view is a pushed stack onto one of the tab page.

Expected behavior:
ionViewCanLeave should be working on all navigation buttons (including tabs), preventing users from navigating out the current page if some condition is not satisfied

Steps to reproduce:
I have created a repo for producing this error. https://github.com/StevenLiSiwei/ionic-ionViewCanLeave.git

Other information:

`global packages:

@ionic/cli-utils : 1.5.0
Ionic CLI        : 3.5.0

local packages:

@ionic/app-scripts              : 2.0.2
@ionic/cli-plugin-ionic-angular : 1.3.2
Ionic Framework                 : ionic-angular 3.5.3

System:

Node       : v7.10.1
OS         : Windows 10
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed
npm       `

[Lazarus9000]

Currently this is causing headaches for me, trying to present an alert to make sure the user understands the consequence of leaving the current page, and providing them a way to cancel their navigation if they desire so.

I'm trying to make a workaround in my tabs, but I am getting nowhere with ionChange on the tabs element and ionSelect on the individual tabs. When I try to use tabs.select() in an alert displayed there, I end up creating an infinite loop, triggering ionSelect or ionChange infitely, or nothing at all happens.
Additionally the ionChange and ionSelect fire too late, the view has already changed. (tap) events on the tabs element fire in time, but they do not carry any information on what was selected, so I can't navigate to the right page if my user desires so. I guess I could use some of the html elements or pixel positions in the event to figure it out, but I'd rather avoid hardcoding something like that
Running out of ideas :(

If anybody figures out a workaround, please share.

[alexweber]

@Lazarus9000 running into a similar issue here. IMHO ideally the active tab should check whether it's active view can leave before exiting.

[Lazarus9000]

Any chance of an update on this issue?
I presume the issue is related to this, https://github.com/ionic-team/ionic/issues/9056 and will probably try out the workaround mentioned in that issue.

[prateikjaiswal]

Any update on this issue?

[astec]

@prateikjaiswal Ionic team is rewriting navigation & tabs for v4 & Stencil so until it's out I would not expect any more major fixes & features.

[Lazarus9000]

@astec , thanks for the update, it's nice to get any status. Is there any expected release date for v4 release?

[astec]

I am not on Ionic team and they do not provide ETA.

You can follow this for some hints: https://docs.google.com/document/d/1LrPDUkfXpqPIsghaSCxHyN1GIZ0TK2bwFxOZx2GKWtI/mobilebasic

[mirko-lazarevic]

Any update on this ? Does Anybody figure out a workaround?

[Anthony2539]

I have the same issue, any update on this ?

[boypower187]

Hi i have the same issue as well, trying to show an alert when the user leaves the current tab, even though it now emit viewDidLeave during tab change, but i needed ionViewCanLeave so that the tab cannot leave if the user press cancel

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/94