Repository navigation
Links break after tapping active tab item when 2 levels into navigation. #1466
Description
Make sure to check the existing issues in this repository
If there is no issue for your problem, tell us about it
I'm building an app that uses TabView navigation and has a hub-spoke pattern. One example I took from my app is the news overview. Home > News List > News Item. These routes are all in the same router outlet: the home tab. When you're in the news list and click the active (home) tab, you return to the home component and everything still works. However when you're on the news detail route and click the active (home) tab, you are also returned to the home component but none of the links in the home component longer work. The app doesn't freeze, scrolling still works and you can also navigate to other tabs, but all links and buttons inside the home component refuse to do anything.
Which platform(s) does your issue occur on?
- iOS versions
- emulator and iphone
Please, provide the following version numbers that your issue occurs with:
- CLI: 4.1.0
- Cross-platform modules: 4.1.0
- Runtime(s): tns-ios: 4.1.0, tns-android: 4.1.3
- Plugin(s):
"dependencies": {
"@angular/animations": "~6.0.0",
"@angular/common": "~6.0.0",
"@angular/compiler": "~6.0.0",
"@angular/core": "~6.0.0",
"@angular/forms": "~6.0.0",
"@angular/http": "~6.0.0",
"@angular/platform-browser": "~6.0.0",
"@angular/platform-browser-dynamic": "~6.0.0",
"@angular/router": "~6.0.0",
"nativescript-angular": "~6.0.0",
"nativescript-theme-core": "~1.0.4",
"reflect-metadata": "~0.1.10",
"rxjs": "~6.1.0",
"tns-core-modules": "4.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular-devkit/core": "~0.6.3",
"@angular/cli": "^6.0.8",
"@angular/compiler-cli": "~6.0.0",
"@ngtools/webpack": "~6.0.3",
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"clean-webpack-plugin": "~0.1.19",
"codelyzer": "~4.3.0",
"copy-webpack-plugin": "~4.5.1",
"css-loader": "~0.28.11",
"extract-text-webpack-plugin": "~3.0.2",
"lazy": "1.0.11",
"nativescript-dev-sass": "~1.6.0",
"nativescript-dev-typescript": "~0.7.0",
"nativescript-dev-webpack": "~0.12.0",
"nativescript-worker-loader": "~0.9.0",
"raw-loader": "~0.5.1",
"resolve-url-loader": "~2.3.0",
"sass-loader": "~7.0.1",
"tslint": "~5.10.0",
"typescript": "~2.7.2",
"uglifyjs-webpack-plugin": "~1.2.5",
"webpack": "~4.6.0",
"webpack-bundle-analyzer": "~2.13.0",
"webpack-cli": "~2.1.3",
"webpack-sources": "~1.1.0"
}
Please, tell us how to recreate the issue in as much detail as possible.
- Issue: Navigate from Home to News and News Article 1, tap the home tab. The news link no longer works.
- Does work: Navigate from Home to News and tap the home tab. The news link still works on the homepage.
Is there any code involved?
Playground example
https://play.nativescript.org/?template=play-ng&id=V2pOml&v=11
I hope I'm not just doing anything stupid with the router outlets or something :/
Activity
jbmarchetti commentedon Oct 13, 2018
Hello,
i have the same problem.
Have you found a solution?
thx
MartoYankov commentedon Jan 9, 2019
@JanLaureys @jbmarchetti I was able to reproduce this issue only on iOS. The problem is the native underlying UITabViewController resets the tab to the first page that was shown in this tab. There is no way for Angular to detect that. What happens is on the native side there is a navigation and the views are shown. but the Angular router didn't navigate and the corresponding ng component wasn't loaded. That is why the view is unresponsive. This native behavior happens out of the box only on iOS. On Android tapping on the tab doesn't reset the tab navigation.
We are currently discussing internally how to handle this. A possible solution is to disable this native behavior and introduce a new event for re-selecting the tab. This way you will be able to explicitly navigate to whichever route you want for both iOS and Android.
vedranstanic82 commentedon Jan 22, 2019
Same problem :( do you have a potential workaround in the meantime? We have two tabs and on each tab we have the "list item->click->detail" lists. However the details of items in the tab A lists point to details of the items in the list B. As and Bs point to reference each other. Lecture (A)<-> Speaker (B) relationship. On iOS we can't cross navigate between the two tabs details due to the same issue above. Could you think of any semi-elegant workarounds even from the perspective of the user flow?
MartoYankov commentedon Jan 23, 2019
@vedranstanic82 The issue above is about re-selecting the tabs by the user. I believe your issue is a bit different. Cross navigating the tabs isn't a straightforward navigation and doesn't come out of the box. It's also particularly hard to implement on Angular, because of the router.
The thing that I can propose as a workaround is to not do cross tab navigation and do the necessary navigation in the current tab. This means that you would navigate to A detail and B detail in both outlets. In a graphical form, it would look something like this:
In some cases this is also better for the user since he would still be in the same tab context when he navigates forward.
Also, please open a new issue regarding the cross navigation scenario you want to achieve. It's important for us to keep track of different scenarios.
vedranstanic82 commentedon Jan 24, 2019
Thnx!!
rchisholm commentedon Feb 5, 2019
I am having this exact issue. Is there a way in iOS to disable tapping the active tab, like how the tabs work in Android? For me that is the desired behavior; the components have back buttons and I do not need or want to be able to navigate to the top level by tapping the active tab.
rchisholm commentedon Feb 26, 2019
@MartoYankov any update here?
MartoYankov commentedon Feb 26, 2019
@rchisholm We are working on a re-design of the TabView for 5.3 and we are aware of this issue. I will create a new tracking issue for the re-desing this week, so that you can see what we`re planning to do. That being said, it looks like this doesn't have a workaround so we can try to patch this sooner by disabling the "feature".
rchisholm commentedon Feb 26, 2019
@MartoYankov thanks for working on this I appreciate it. It is really the only breaking bug present in my app preventing me from release, and I was considering ditching TabView altogether. Good to know I won't have to.
MartoYankov commentedon Mar 5, 2019
@rchisholm You can test this with
tns-core-modules@rc. Let me know if this fixes your issue.rchisholm commentedon Mar 6, 2019
@MartoYankov this has solved my issue. Thank you so much. keep up the good work.