emberjs / emberjs/ember.js

transition.abort doesn't stop the URL from updating

Open
#18,620 4 comments 6 reactions 0 assignees View on GitHub
Routing
Dominant language
TypeScript
Stars
22.6k
Forks
4.2k
Avg merge
3d 12h
Merged PRs (30d)
15

Description

`transition.abort()` is not currently working as expected. In some circumstances, when the user hits the back button, we prompt the user for unsaved changes. We handle this scenario in a lot of places by doing something like the following (This is the suggested approach in the tutorial [here](https://guides.emberjs.com/release/routing/preventing-and-retrying-transitions/))

```js
if (!confirm("You have unsaved changes")) {
transition.abort();
}
```

The above doesn't appear to work 100% of the time. While the route has not changed, the browser URL points to something else.

**Code for the above example**
I created a test ember app to replicate this. The code in this repo follows ["Create your first ember app"](https://guides.emberjs.com/release/routing/preventing-and-retrying-transitions/) tutorial guidelines.
https://github.com/apoorvparijat/test-ember-app

**Steps to reproduce**

1. Pull the code from the repo and start ember server
2. Point your browser to http://localhost:4200/about route
3. Click on `Contact` link
4. You will see a confirmation dialog. The URL does NOT change at this point. Press OK here.
5. You have now landed on Contact page - http://localhost:4200/contact
6. Hit the browser back button now. You will see the confirmation dialog again.
**What I expect to happen:** The URL stays the same on `/contact`
**What does happen:** The URL has already changed to the `/about` page before accepting the dialog
7. If you press Cancel, the URL and Ember app ends up in an inconsistent state. The URL points to /about but Contact route is loaded.

**GIF demonstrating the same**

![Screen Recording 2019-12-18 at 04 15 pm](https://user-images.githubusercontent.com/1388235/71103701-7475e480-21b2-11ea-9b96-985d400e9751.gif)

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.