Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Outlet becomes unresponsive/freezes when using nested outlets, Android only #112

Closed
paul-staskiewicz opened this issue Apr 25, 2023 · 6 comments

Comments

@paul-staskiewicz
Copy link

paul-staskiewicz commented Apr 25, 2023

Environment

  • CLI: 8.5.3
  • Android Runtime: 8.5.0
  • Android: 12/13
  • iOS Runtime: 8.5.1
  • NativeScript-Angular: 14.2.8
  • Angular: 14.2.12

Describe the bug
When I navigate forward in a parent outlet and then switch to another parent, the outlet I navigated forward to, does not load properly again. No image/text is loaded and the prior screen can be seen. This issue is only present on Android.

To Reproduce
The outlets configured as follows:

<BottomNavigation>
  <TabStrip>
    <TabStripItem></TabStripItem>
    <TabStripItem></TabStripItem>
    <TabStripItem></TabStripItem>
  </TabStrip>

  <TabContentItem>
    <page-router-outlet name="tab1"></page-router-outlet>
  </TabContentItem>
  <TabContentItem>
    <page-router-outlet name="tab2"></page-router-outlet>
  </TabContentItem>
  <TabContentItem>
    <page-router-outlet name="tab3"></page-router-outlet>
   </TabContentItem>
</BottomNavigation>

The routes in second outlet (tab2) are configured as follows:

NativeScriptRouterModule.forChild([
            { path: '', pathMatch: 'full', redirectTo: 'step 1' },
            {
                path: 'step 1',
                component: Step1Component
            },
            {
                path: 'step 2',
                component: Step2Component
            },
            {
                path: 'step 3',
                component: Step3Component
            },
            {
                path: 'step 4',
                component: Step4Component
            },
            {
                path: 'step 5',
                component: Step5Component
            }
        ])

The issue can be produced when navigating like this:

tab2/step 1 -> step 2 -> step 3 -> step 4 -> step 5 -> tab 1 -> tab 2/step 1 -> step 2 (becomes unresponsive/does not load properly)

Expected behavior
The component should load properly on the second navigation.

Additional context
I strongly believe it is related or could be the same as: NativeScript/nativescript-angular#2075. I will try to set up a repo to reproduce the issue.

@edusperoni
Copy link
Collaborator

You should probably be using page-router-outlet instead of router-outlet

@paul-staskiewicz
Copy link
Author

You should probably be using page-router-outlet instead of router-outlet

Thanks for the reply! We're already using page-router-outlets (It was a mistake on my side when creating the issue). I've updated the issue accordingly.

@edusperoni
Copy link
Collaborator

Please share a demo project! That'd be very helpful. You can also share your package.json as the issue might be with the material-tabs plugin version

@paul-staskiewicz
Copy link
Author

Please share a demo project! That'd be very helpful. You can also share your package.json as the issue might be with the material-tabs plugin version

I have uploaded a demo project: https://github.com/paul-staskiewicz/ns-frozen-outlet. Thanks in advance for helpings us out! I have included two tabs: A list tab, and a process tab. You start at the process tab and click through the steps. At the end you switch to the list tab and the navigaton will be reset on the process tab. After this, when you switch back to the process tab and start again, you will be stuck on step 1.

@paul-staskiewicz
Copy link
Author

paul-staskiewicz commented Apr 26, 2023

Please share a demo project! That'd be very helpful. You can also share your package.json as the issue might be with the material-tabs plugin version

I have experimented with the version of @nativescript-community/ui-material-bottom-navigation, as you suggested. This bug was introduced with version 7.0.1 and version 7.0.0 works fine. I will close this issue here, as it does not belong to this package.

@paul-staskiewicz
Copy link
Author

The follow up issue is here: nativescript-community/ui-material-components#442. @edusperoni It is related to a pull request you made.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants