emberjs / emberjs/ember.js

[Bug] Transitions including updates to replace & refreshModel query params replace the previous history entry

Open
#19,582 0 comments 1 reaction 0 assignees View on GitHub
Routing
Dominant language
TypeScript
Stars
22.6k
Forks
4.2k
Avg merge
3d 12h
Merged PRs (30d)
15

Description

### 🐞 Describe the Bug
When following a LinkTo which specifies query params, and they include qps configured as both `replace` and `refreshModel`, the previous history entry is replaced.

### 🔬 Minimal Reproduction
https://github.com/courajs/replace-query-param-repro
On https://courajs.github.io/replace-query-param-repro
1. Click the "one" link
2. Click the "two" link
3. Click back. See you are back on the page with the two links
4. Click the "two:a" link
5. Click back. See you are all the way back on the page with the one link.

### 😕 Actual Behavior
The middle history entry is replaced.

### 🤔 Expected Behavior
Full history entries should not be replaced because of qp updates. They should simply not create new history entries for qp-driven transitions.

### 🌍 Environment

- Ember: 3.26
- Node.js/npm:
ember-cli: 3.26.1
node: 14.16.1
os: darwin x64
- Browser: multiple

### ➕ Additional Context
This happens whether it is a single qp with both properties, or separate qps, one with `replace` and one with `refreshModel`.
One could argue that this is actually intended behavior. `refreshModel` opts into a full transition, and `replace` means this should replace the previous history entry. But in the guides, it talks about [pushState vs replaceState _in response to a controller query param change_ ](https://guides.emberjs.com/release/routing/query-params/#toc_update-url-with-replacestate-instead). This is in response to an intended "update" transition, not an intended "replace" transition.
Furthermore, I have noticed that the `queryParamsOnly` property ends up set on the final transition. Setting it to false in the activate hook results in my desired behavior.

## Workaround
Add this `activate` hook to any route with query params with both properties. This is safe, because if we are activating the route, we must have come from another route. So this should not be query-param-only transition.
```js
activate(transition) {
transition.queryParamsOnly = false;
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.