bug: location.replaceState does not update url in stack controller view item

[danielzen]

Bug Report

Ionic version: [x] 5.x

Current behavior: I am doing a replace.State on the queryParams depending on which ionSlide is selected. In the template:

    <ion-slides #ionSlides (ionSlideDidChange)="updateQueryParams(ionSlides.getActiveIndex())"

in PageComponent:

async updateQueryParams(getIndex) {
  const slideNum = await getIndex;
  const path = this.location.path().split('?')[0];
  this.location.replaceState(path, 'slide='+slideNum);
}

Later I routerLink to another page and use ion-back-button to return to this page, and ion-back-button is ignoring any and all replaceStates when updating the url. The state of the displayed url reverts to that before any and all replaceState calls. Only ion-back-button has this problem, using Angular's Location.back() works as expected as does Ionic's NavController.navigateBack(). Even the browser's back button will restore the replaceState value (albeit with a reload).

Looking through the code at IonBackButtonDelegate, I can see the underlying code relies on our culprit: IonRouterOutlet.pop()

This is similar to (but different than) #15181

Expected behavior: The ion-back-button should do the same as the browser's back button, and return to the URL contents to the last location.replaceState

Steps to reproduce:

• https://stackblitz.com/edit/ionic-v5-replacestate-backbutton-bug

Ionic info:

Ionic:

   Ionic CLI                     : 6.11.0 (/Users/zen/.nvm/versions/node/v12.18.2/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.1000.6
   @angular-devkit/schematics    : 10.0.6
   @angular/cli                  : 10.0.6
   @ionic/angular-toolkit        : 2.3.0

Utility:

   cordova-res (update available: 0.15.1) : 0.12.1
   native-run                             : 1.0.0

System:

   NodeJS : v12.18.2 (/Users/zen/.nvm/versions/node/v12.18.2/bin/node)
   npm    : 6.14.7
   OS     : macOS Mojave

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[danielzen]

@liamdebeasi Here is an example that clearly shows the above bug:

• https://stackblitz.com/edit/ionic-v5-replacestate-backbutton-bug

[liamdebeasi]

Thanks, I can reproduce the issue. The issue is that when using IonRouterOutlet.pop, we pop an item off the stack and navigate to the url stored in that item. Doing location.replaceState does not update the url stored in that view item.

[NickRussell95]

I just encountered this issue too, it also affects the iOS swipe back gesture. Did you find a solution @liamdebeasi?

[ajaykrishnan33]

I am encountering the same issue too.

[rdlabo]

try this.navCtrl.navigateRoot("update path", { replaceUrl: true }); instead of replaceState .