I am currently working on a simple application where I noticed a strange behavior (at least I thought it to be). Say I have the following tab structure,
- tabs home - this is the base abstract view on which below views fit in
- Home tab
- Search tab - this is the nested abstract view and has two child views ‘category’ and ‘result’
- About tab
- Settings tab
Here’s what happens,
- App launches and lands on Home tab
- I navigate to Search tab which loads the ‘category’ page
- In Search tab I click from a list of items (#/tabs/search/category)
- It navigates to the ‘result’ page with the selected ‘category’ as query param (#/tabs/search/result?query=something) and shows the back button. So far everything is good.
- Now being the ‘result’ page, I click on the About tab
- Again I click on the Search tab and it shows the ‘result’ page but the url now is (#/tabs/search/result)
- I clicked on ‘back’ button in the nav bar and nothing happens
- On checking the history from $ionicHistory.viewHistory(), noticed that when navigating from Search tab to About tab, ionic added #/tabs/search/result to the history stack on top of #tabs/search/result?query=something. So, basically the current view is trying to navigate back to the same view.
- To overcome this currently I had to avoid using query params or try to visit any other tab and come back to the Search tab something like,
Home->Search category->Search result->About->Search result (back doesn’t work at this point)->About->Search result (now back works)
I forked a codepen which demonstrate tabs and modified the code to illustrate the above issue - https://codepen.io/vms20591/pen/XjKqAw
Please do help me with the issue.
Thanks in advance