elastic / elastic/eui

[EuiLink] Short-circuit `EuiLink#onClick` if modifier key is pressed

Open
#8,341 8 comments 0 reactions 0 assignees View on GitHub
request stale-issue
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

**Is your feature request related to a problem? Please describe.**

Cloud UI had a bug report/feature request around the handling of links. In short, when Ctrl/Cmd/Shift-clicking to open an EuiLink in a new window, it doesn't work. This is due to our usage of both `href` and `onClick` in EuiLink:

- `onClick` is the main handler so that internal navigation within the app can be handled programmatically (`history.push`) for optimal UX
- `href` is still provided to allow browser native functionality for right-click context menus (e.g. "Open in new tab")

We are not, however, consulting the state of any modification keys in the `onClick` handler, so attempting to use a keyboard shortcut doesn't have the intended effect in-browser.

**Describe the solution you'd like**

I propose that `EuiLink#onClick` first guard against modifier keys before invoking the supplied prop callback. If a modifier key is detected, assume that the user wants to open the link in a new destination and therefore programmatic `onClick` behaviour is not necessary. If there are foreseeable edge cases, we could also consider an additional prop for fine-grained control (e.g. `alwaysUseOnClick?: true | undefined`), but I'm having a hard time coming up with any.

**Describe alternatives you've considered**

The most obvious alternative is to bake this functionality into a wrapper component within Cloud UI, which performs the guard but otherwise passes through to `EuiLink`. However, I think this is a fundamental enough concern that it is naturally coupled to the component that handles the click and makes the distinction between programmatic (`onClick`) and native (`href`) navigation -- `EuiLink`.

**Desired timeline**

Open

**Additional context**

I suspect when I say `EuiLink` I also mean `EuiButton`-as-supplied-with-an-href.

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.