Ionic-framework: bug: iOS - dynamic tabs initializing (Ionic 5)

[kklindic]

Bug Report

Ionic version:
[x] 5.x

Current behavior:
Inside ion-tabs/ion-tab-bar component, when creating ion-tab-buttons dynamically, in my case depending on params from queryParams Observable, error occurs.
As my params are fetched after tabs initialization, there seems to be an error which isn't properly handled on iOS.

There is a problem where if you don't have any ion-tab element or page with .ion-page class on tabs initialization, error occurs in getBackButton method inside ios.transition.js file.
Error that breaks even ionView* events (ionViewWillEnter, ionViewDidEnter, ionViewWillLeave etc. doesn't trigger).

Expected behavior:
To be able to create dynamic ionic tabs (ion-tab-buttons) on iOS.

Steps to reproduce:
Try creating ion-tab-buttons dynamically on iOS as described above.

Related code:
const activeTab is null which is causing this error:

https://github.com/ionic-team/ionic/blob/e0f3c09bab1ad6d1acbcb3fa9cb76609482fa93f/core/src/utils/transition/ios.transition.ts#L32

Ionic info:

Ionic:
   Ionic CLI                     : 6.3.0 (/usr/local/Cellar/nvm/0.35.2/versions/node/v10.16.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.901.0
   @angular-devkit/schematics    : 9.1.0
   @angular/cli                  : 9.1.0
   @ionic/angular-toolkit        : 2.2.0
Cordova:
   Cordova CLI       : 8.1.2 ([email protected])
   Cordova Platforms : ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 2.5.3, (and 34 other plugins)
Utility:
   cordova-res : not installed
   native-run  : not installed
System:
   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v10.16.0 (/usr/local/Cellar/nvm/0.35.2/versions/node/v10.16.0/bin/node)
   npm        : 6.9.0
   OS         : macOS Catalina
   Xcode      : Xcode 11.3.1 Build version 11C504

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?

[kklindic]

Unfortunately I can't, as the repo is private and project is owned by the company I work for.

[liamdebeasi]

Can you reproduce the issue in an Ionic starter application?

[kklindic]

Just solved it :)
Made an ionic starter app and figured it out.

It happens if you don't preselect tab at all or if you preselect it at the wrong time.
So tab needs to be preselected on ngAfterViewInit and not on ionViewWillEnter.

I still think that your code could be improved, as this only happens on iOS devices and Android doesn't mind when you're preselecting tab. Feel free to close this issue if you don't agree.

Anyway, thanks for everything.

[liamdebeasi]

Thanks for the follow up. While the approach of dynamically generating nested tabs is probably not one we recommend, the error itself is a bit unforgiving so I will make a PR that addresses this.

Here is a dev build if you would like to test out the fix:

npm i @ionic/[email protected]

[kklindic]

I know that the approach of dynamically generating nested tabs isn't the best solution, but unfortunately it is what it is for now :)
We'll probably reimplement that once the task gets into the sprint.

This works as charm! Thanks for this fix and your effort. Do you have any idea when this fix will be released?

[liamdebeasi]

We don't typically comment on the exact timing of releases, but I do plan on getting this into the next release. 😄

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/20955 and will be available in an upcoming release of Ionic Framework.

[kklindic]

Great, thank you for resolving this so fast. Cheers 🥂

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.