bug: vue, inner tab lifecycle not firing on subsequent visits

[kaleming]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

Last week I upgraded my vue app from ionic v5 to ionic v6, and I noticed a strange behavior.

1 - The main page contains a list of forms. 2- If I go to another page to create a new form, when I go back to home page, the lifecycle hook onIonViewWillEnter or onIonViewDidEnter is not triggered. Consequently, the created form is not listed. 3- I have to go to another page and return to home page again to get this form listed.

I had a look on this issue #23824, which seems to be already solved. After that I created a small example to analyze a little deeper this behavior, and I noticed that in my case, the lifecycle hooks is not being triggered when the "tabs" component is being used.

On Ionic v5 everything worked fine.

Expected Behavior

1 - The main page contains a list of forms. 2- If I go to another page to create a new form, when I go back to home page, it is expected the created form to be listed.

Steps to Reproduce

1. Click the CREATE FORM button

2. Choose any option, and click it. (Option 1, for example)

3. Type a form name. (test 1, for example)

4. Click the Create button

5. After this, you'll be redirected to the home page, where it should contain a list of the created forms.

6. The first created form is listed correctly, but the following ones, are not listed. It's necessary to change the tab (Tab 1 -> Tab 2 -> Tab 1) to get the correct list of forms.

Code Reproduction URL

Ionic v6 - bug

Working example:

Ionic v5 - working

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 6.2.3

Capacitor:

Capacitor CLI : 3.7.0 @capacitor/android : 3.7.0 @capacitor/core : 3.7.0 @capacitor/ios : 3.7.0

Utility:

cordova-res : 0.15.4 native-run : 1.6.0

System:

NodeJS : v16.16.0 (/usr/local/bin/node) npm : 6.14.17 OS : Linux 5.15

Additional Information

Related issue (#23824)

[liamdebeasi]

Thanks for the issue. Can you double check your repo? I get the following errors:

jeep-sqlite.entry.js?41d6:2591 Uncaught (in promise) RuntimeError: Aborted(RuntimeError: Aborted(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.). Build with -s ASSERTIONS=1 for more info.
    at L (jeep-sqlite.entry.js?41d6:2591:1)
    at eval (jeep-sqlite.entry.js?41d6:2641:1)
L @ jeep-sqlite.entry.js?41d6:2591
eval @ jeep-sqlite.entry.js?41d6:2641
main.ts?5e60:90 Uncaught (in promise) Error: Error: Error: Open: undefined

Also, do you have an example of this working in Ionic 5?

[kaleming]

Hi @liamdebeasi, thanks for your reply.

In order to work properly, you should try on android emulator, since this example uses sqlite.

Here is a working example of v5: https://github.com/Akaori/reproducible_example_ionic5

If it is not possible to test on emulator, just notify me, then I can try to use jeep-sqlite to make it work on browser.

[liamdebeasi]

Is the sqlite plugin required to reproduce the issue? If it is not, can you make a reproduction without that dependency? Being able to run the project directly in the browser will let me debug/identify the issue quickly.

[kaleming]

@liamdebeasi I've just fix the app v6 to work on browser. Could you please try again cloning this repo and rebuild ?

*I've just updated working v5 version here as well.

[liamdebeasi]

Thanks! I am testing the v6 app, and onIonViewWillEnter does appear to be called after creating the form.

Here is what I see on my end:

https://user-images.githubusercontent.com/2721089/185488639-7ed1e793-9a7b-4610-baf1-1d78055c3ed1.mov

[kaleming]

Hi @liamdebeasi,

Using the repository v6, The first created form is listed correctly, but the following ones, are not listed. It's necessary to change the tab (Tab 1 -> Tab 2 -> Tab 1) to get the correct list of forms. Like in this video below:

https://user-images.githubusercontent.com/51836477/185492447-e44cdd0f-9524-46ba-a53c-defc237cd234.mp4

[kaleming]

On ionic v5, everything works well:

https://user-images.githubusercontent.com/51836477/185496370-17bee557-e1d6-4db3-a1c6-15e502580dc9.mp4

[liamdebeasi]

Thanks, I can reproduce this behavior. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/vue@6.2.4-dev.11660860656.1af83dcd @ionic/vue-router@6.2.4-dev.11660860656.1af83dcd

[kaleming]

Well done @liamdebeasi, it is working on both example-v6 and on my real app.

Thanks a lot for this quick fix!

[liamdebeasi]

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

[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.