emberjs / emberjs/ember.js

[Bug] Unable to prevent default <LinkTo> behavior without blocking all event handlers

Open
#19,861 9 comments 0 reactions 0 assignees View on GitHub
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

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.