Ionic-framework: bug: [Ionic v4] query params are getting lost when navigating between tabs

[mobregozo]

Bug Report

Query params are getting lost when navigating back and forth between tabs when using the ion-tabs buttons.

Current behavior:
When navigating between tabs and one of the views of the tabs has query params in its URL (http://www.examplepage.com/tab1?key=value), the query params are lost when navigating back to that particular Tab.

Example:

• Tab A has a view with query params in its URL
• I click on the ion-tab-button to navigate to Tab B.
• I navigate back by using the ion-tabs to Tab A.
• And then the query params for Tab A are lost (http://www.examplepage.com/tab1?key=value -> http://www.examplepage.com/tab1).

Expected behavior:
Following the example above, I will expect the query params to be preserved when navigating back to the latest active view on Tab A.

Related code:

I did some investigation and I did notice that the Angular Router is properly saving the query params under the property savedExtras but the Ionic IonRouterOutlet API only refers to the
URL without taking into the account the query params, like it can be checked in the code below from the IonRouterOutlet class.

/**
   * Returns the URL of the active page of each stack.
   */
  getLastUrl(stackId?: string): string | undefined {
    const active = this.stackCtrl.getLastUrl(stackId);
    return active ? active.url : undefined;
  }

I am not sure if this is the expected behavior or if the queryParams needs to be considered when getting the last Url.

Ionic info:

Ionic:

   ionic (Ionic CLI) : 4.2.1

System:

   NodeJS : v10.9.0
   npm    : 6.7.0
   OS     : macOS

[mobregozo]

I just did a quick test on a fix and seems to be working as expected at least by me. I would like to offer a PR, but I want to be sure that there is a reason why the current behavior is the way it is.

/**
   * Returns the URL of the active page of each stack.
   */
  getLastUrl(stackId?: string): string | undefined {
    const active = this.stackCtrl.getLastUrl(stackId);

   //active contains the queryParams under savedExtras.queryParams as a dictionary so they can easily be added to the active.url, and then the function will return the full URL including the query params.
   if (active && Object.keys(active.savedExtras.queryParams).length >0){
       const queryParams = Object.keys(active.savedExtras.queryParams).map(key => key + '=' + active.savedExtras.queryParams[key]).join('&');
       active.url = `${active.url}?${queryParams}`;
   }  

    return active ? active.url : undefined;
  }

[yannbf]

@liamdebeasi I see there are two PRs that intend to fix this issue: #18740 and #18493.
Is it possible to have someone from Ionic to review them?

Thanks!

[eduboxgithub]

I'm also facing the same problem...

I'm using tabs. I have a home page, a list page and a details page.
If I navigate in my app like this:

1. Click Tab Home: /tabs/home
2. Click Tab List: /tabs/list
3. Click Card Inside List: /tabs/list/details?id=10999
4. Click Tab Home: /tabs/home
5. Click Tab List: /tabs/list/details (query params ?id=10999 lost has been lost)

The query params will be lost in the last navigation and the context on my page is also lost.

I was thinking to create a guard, and validate the navigation.
If no query params exists on all "details" states, the guard will redirect to a list page or home, but the user could be confused if something like this happens.

@mobregozo Where should I use your function? Can it be applied on the guard?

How can a critical bug like this one still be open?

[liamdebeasi]

Thanks for the issue! This bug has been resolved via https://github.com/ionic-team/ionic/pull/18493 and 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.