Unable to preventDefault on route-href when pushState is true
- Dominant language
- TypeScript
- Stars
- 11.7k
- Forks
- 608
- PR merge metrics
- No merged PRs in 30d
Description
I'm trying to prevent a link with a `route-href` attribute from navigating to the new URL.
When I configure the router to use `hashChange` instead of `pushState` it works fine. But if I switch to `pushState` `preventDefault()` does nothing:
```js
import {inject} from 'aurelia-framework';
@inject(Element)
export class PreventHrefCustomAttribute {
constructor (el) {
this.el = el;
this.onClick = e => {
e.preventDefault(); // This only works when pushState: false, hashChange: true
alert('The href should not be followed');
};
}
attached () {
this.el.addEventListener('click', this.onClick);
}
detached () {
this.el.removeEventListener('click', this.onClick);
}
}
```
Contributor guide
Research direction
Start with the route-href behavior and the custom attribute's click handler shown in the issue, then compare router behavior with hashChange enabled versus pushState enabled. Reproduce the link navigation in both configurations and verify that preventDefault reliably stops navigation when the handler calls it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100