[Bug] Unable to prevent default <LinkTo> behavior without blocking all event handlers
- Dominant language
- TypeScript
- Stars
- 22.6k
- Forks
- 4.2k
- Avg merge
- 3d 12h
- Merged PRs (30d)
- 15
Description
### 🐞 Describe the Bug
When using the `` component, it's occasionally helpful to override the default link behavior, such as by opening a modal instead of navigating to a page of the same content.
Ideally this would be handled via a click handler using `event.preventDefault()`, but unfortunately [LinkTo doesn't check `event.defaultPrevented` before performing its default click behavior][1].
This leads to some complications because calling `stopPropagation`/`stopImmediatePropagation` prevent _all_ event handlers from executing, which can be problematic if other handlers—such as analytics tracking—are also bound to the element or any of its ancestors.
### 🔬 Minimal Reproduction
https://ember-twiddle.com/c5143970c9a673adff023dc106faedcc is an example that shows two links that have click handlers.
### 😕 Actual Behavior
The first uses `preventDefault` which is taken to the `/example` route, but still allows the parent event handler to execute.
The second uses `stopPropagation` which does not navigate to `/example`, but also doesn't allow the parent event handler to execute.
### 🤔 Expected Behavior
In the case of the first link, I'd expect clicking on the link to call both handlers and _not_ navigate to the `/example` route.
### 🌍 Environment
- Ember: -
- Node.js/npm: -
- OS: -
- Browser: -
### ➕ Additional Context
[1]: https://github.com/emberjs/ember.js/blob/c37df4dadf49920cc70a6a1811dd9fb7a955a6e4/packages/%40ember/-internals/glimmer/lib/components/link-to.ts#L136-L183
Contributor guide
Assessment
This issue has not been assessed yet.