Nativescript-angular: Navigation broken with closing modal

[tsonevn]

_From @cgebe on June 12, 2018 17:17_

Tell us about the problem

I am navigating to a lazy loaded module and within the same call i am closing a modal. The navigation works after a delay but immediately navigates back to the originating page without any error message.

Maybe related to: https://github.com/NativeScript/NativeScript/issues/5853

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• CLI: 4.1.0
• Cross-platform modules: 4.1.0
• Runtime(s): 4.1.2
• Plugin(s): "nativescript-angular": "6.0.0",

Please tell us how to recreate the issue in as much detail as possible.

Have a modal with a button on a page. In the the button click call navigate to a lazy loaded module and call the closeCallback() method. When not calling the closeCallback() the navigate happens immediately but it navigates back after the model is closed. If calling closeCallback() it navigates after 2 seconds but immediately navigates back. No errors shown.

As soon as the closeCallback() method is called the navigate back happens. Is there some hidden call happening in the back? How can i prevent this?

_Copied from original issue: NativeScript/NativeScript#5944_

[tsonevn]

_From @cgebe on June 12, 2018 17:21_

As soon as i clear the history ({ clearHistory: true }), the navigate back does not occur.

[tsonevn]

_From @cgebe on June 12, 2018 17:24_

It is actually not related to closeCallback() i am removing all such calls and still as soon as i close the modal by clicking outside of it, the navigate back happens

[tsonevn]

_From @cgebe on June 12, 2018 18:24_

This is exactly the same issue: https://stackoverflow.com/questions/50812037/nativescript-4-1-with-angular-modal-view-with-navigation-may-result-in-router-i

[tsonevn]

Hi @cgebe,
If I understand you correctly, you are trying to prevent a non-fullscreen modal page from closing, while you tap outside the modal window. We investigate this scenario, however, this seems to be expected native behaviour for Android, and it is something that we can not control. This type of modal page can always be close while tapping on the empty space. To solve your case, I would suggest enabling the fullscreen property for the modal page.
Also if I am missing something and the issue is different, please provide some more info. It will help if you send us sample project, which can be used for debugging.

[cgebe]

The issue is a different one:

Expected behavior:
I am having a modal displaying two buttons. When i click either of the two buttons, the modal should be closed and the app should navigate to a different page/lazy loaded module and stay there.

Actual behavior:
I tap a button, the modal is closed and the navigation to the different page/module happens, however then the app immediately navigates back to the previous page without any navigation call on my side to where the modal was tapped.

I observed the following scenarios by juggling around the navigation/closeCallback() code:

1. I call navigate() before closeCallback() directly in the method which is called when tapping the button:
   The closing of the modal is made immediately, navigating to the lazy loaded module takes about 1.5 seconds, then it navigates back

2. I call navigate() after closeCallback() directly in the method which is called when tapping the button:
   same as 1.

3. I call navigate() in the callback method of the page which opens the modal:
   same as 1.

4. I call navigate() directly in the method which is called when tapping the button and do not call closeCallback() at all:
   The app navigates to the new page/lazy loaded module with the modal still opened, so in the background i have my new page but the modal is in the foreground, THEN i close the modal by tapping outside -> immediate navigate back to the previous page.

I checked the events in the router and as as soon as the modal is closed there is a navigation back event triggered automatically.
So somehow the closing of a modal triggers a navigateBack() automatically in the new version.

A {clearHistory:true} param to the navigate() method prevents this from happening - of course there is no page to navigate back to, but this is not what i want.

[cgebe]

The sample project is: https://github.com/PoC-Consortium/burstcoin-mobile
The modal in the accounts tab when trying to add new accounts.

Code:
https://github.com/PoC-Consortium/burstcoin-mobile/blob/master/app/views/tabs/accounts/accounts.component.ts
https://github.com/PoC-Consortium/burstcoin-mobile/blob/master/app/views/tabs/accounts/add/add.component.ts

[tsonevn]

Hi @cgebe,
You can try removing the following code

this.page.on("unloaded", () => {
       this.params.closeCallback();
});

from ngOnInit from all components. With the latest NativeScript version there is no need to call closeCallback method on page unloaded event. Then check if the issue will be still reproducable.

[cgebe]

Yes, i tried, but the issue persists. I removed the code section, however it is still navigating back automatically.

[tsonevn]

HI @cgebe,
Make sure that all latest changes have been applied. Try to deleting node_modules, platforms, hooks folders and try to rebuild the app. If the issues persist, please provide more info about the steps, which should be used in the project for reproducing the problem.

[cgebe]

Hey @tsonevn,

i rebuilt several times and also tried with different emulators as well as devices.
The bug can be experienced in the current version of the sample project with the following navigation steps:

1. In the start screen choose 'Import' and type an arbitrary string as password, accept modal and type an arbitrary pin to get to the tabs view
2. In the tabs view choose the settings tab
3. In the settings tab, tap the support button
4. In the opened modal, tap the support button, this triggers the navigation to the transaction module/page after closing the modal
   => This is where it automatically navigates back to the settings tab

Related code:
https://github.com/PoC-Consortium/burstcoin-mobile/blob/master/app/views/tabs/settings/support/support.component.ts
https://github.com/PoC-Consortium/burstcoin-mobile/blob/master/app/views/tabs/settings/settings.component.ts

(I exchanged the modal in the accounts tab with two buttons instead of a modal now due to this error. The settings tab is the only place still possible to experience this bug.)

[tsonevn]

Hi @cgebe,
I reviewed your project and found that you are using the old approach for opening the modal page, where the modal page navigation is not supported. To enable this functionality, you should define second page-router-outlet, which will be used for making navigation inside the modal page. For further help, you can review this part of the documentation.

[cgebe]

Alright thank you, i will look into it! Can be closed then ;)

[rohanrichards]

Hi i'd like to see this re-opened as the issue is not solved in the comment from @tsonevn . This is not about navigating from within a modal. This is specifically about navigating after closing a modal in the callback.

Please pay special attention here, this is not about nested inner navigation within the modal.

this.modal.showModal(ModalComponent, options).then(result => {
 this.RouterExtensions.navigateByUrl(`/other-route`, { clearHistory: true });
})

The above example would navigate to other-route and then immediately back to the original page.

I very closely followed the example from the documentation (including a root modal view with a router-outlet) and the problem still persists.

Putting the navigation in a timeout is an OK workaround:

setTimeout(() => {
    this.RouterExtensions.navigateByUrl(`workout-preview/${userWorkoutId}`, { clearHistory: true });
}, 50);

[tsonevn]

Hi @rohanrichards,
The problem that you are facing might be related to the issue logged here in the tns-core-modules repository - https://github.com/NativeScript/NativeScript/issues/5744 . In issue #5744 the scenario is also related to the case, when you try to achieve something(open second modal page, make navigation) just after closing the first modal page. Also, it will help if you provide a sample project, which demonstrates your case and can be used for debugging.

[rohanrichards]

@tsonevn thank you for your reply, I cannot tell if they are related, but definitely seems possible. I will find it hard to get time to create a sample project in the immediate future, but will post here when I can get to it.

[jeffswitzer]

I also ran into exactly what @rohanrichards describes. Also can verify that wrapping the route in a setTimeout is a workaround.

My guess is that the explicit route in the modal close callback gets called taking you where you want to go, but then shortly after that another implicit route gets called triggered from the modal close (not defined in the callback) taking you back to the route that sent you to the modal in the first place.

[jnorkus]

I am experiencing the same issue. SetTimeout is a workaround for the time being. This started happening after upgrading to Angular6. @tsonevn I don't think it's related to tns-core-modules as I have tried upgrading all NS related packages BEFORE upgrading angular and nativescript-angular.

Sample project:
https://github.com/jnorkus/ns-test-modal-navigation

[jnorkus]

@tsonevn any update on this? This is still an issue with latest packages and I suggest reopening.

[griffithstek]

I stumbled on this issue today and I can confirm it is alive and well. I tweaked the modal view playground to demonstrate what's happening. If you click on the "Modal Search" button and then "Close Modal" it should navigate you automatically to the Item page, but without the timeout it navigates to the Item page and immediately back to the featured (root) menu: https://play.nativescript.org/?template=play-ng&id=oSCxPW&_ga=2.122414274.83672253.1554751882-1553031162.1550619485
Can we please reopen and fix this?

[fhackenb]

@griffithstek I also noticed this today in my app. Any resolution yet?

[fhackenb]

@griffithstek I noticed this issue on tns-ios 5.3.1 and downgrading back to 5.2.0 seems to have solved the issue for me

[nikoTM]

Still an issue on latest version. This needs to be reopened.

[FanniPutnoczki]

Still an issue, but the setTimeout workaround works

[adonus19]

This is still an issue. Even with all latest versions of NativeScript, including CLI, and Angular.

[jcfrane]

Still an issue, however my scenario is calling back() function of RouterExtension does not work. I call back() from outside the showModal() callback.

[lostation]

Great same here... Another Nativescript weird behavior... Please NS team help us with that issue... I'm really near to regret having chosen Nativescript for a new pro app ... some basics are really not present yet...and that's really annoying.

[jnorkus]

@lostation welcome to the club. But despite many such annoyances, NS is progressing quite well. This particular issue can be worked around and probably never gets prioritised.

[lostation]

No I already tried.. it cannot be worked around...Either using modal root component or using router.navigate into a setTimeout make reloading a lot of stuff... As you said...I suppose NS is progressing...but angular integration is hard...especially when dealing with huge shared app. Modal View can only be used when you have a simple app with no sub modules children routes etc ... once you get a redirect in the router sub tree it's dead. So I will simply don't use anymore modal view. If you have a robust solution please share it ;)

[jnorkus]

@lostation I consider our two apps quite complex - they have routes, child routes and we do rely on modals a lot. That being said I don't know anything about your use case. For anyone to help you, first we need to see some code.

[kriefsacha]

Same thing here, navigating on the "then" of the openModal causes the bug that its navigating to the page and then navigates back after few seconds , and setTimeout did the trick but i hoped that there is a best solution ..

[PhilippS93]

Can confirm, still an issue.

[tauntdigital]

This issue still persists today, and for me I could not fix it with a setTimeout as it would then affect every single other modal I'd close (I'd get a navigation after any modal is closed). I have temporarily worked around this by setting a CanDeactivate guard that prevents navigation if a local variable is set, which I had to set after closing any modal on the site. There is clearly something going wrong with the Router states, but I couldn't resolve it that way as I couldn't figure out what the issue is.

[odedBartov]

same problem here.
i put the navigation in a set time out and it works

setTimeout(() => {
                    this.router.navigate(['myPage']);
                }, 0);