Support keyboard modifier for click events

[shouichi]

This commit adds functionality to accept modifiers for click events, e.g., ctrl+click->link#open.

[lb-]

Just a thought, this can be done I think pretty easily with custom action options out of the box today. I am wondering of this would be sufficient for your requirements.

I have validated and the below works really well, it even supports the click shorthand data-action notation nicely.

import { Application } from "@hotwired/stimulus"

const application = Application.start();

application.registerActionOption("alt", ({ event, value }) => value ? event.altKey : !event.altKey);
application.registerActionOption("ctrl", ({ event, value }) => value ? event.ctrlKey : !event.ctrlKey);
application.registerActionOption("meta", ({ event, value }) => value ? event.metaKey : !event.metaKey);

<button type="button" data-action="gallery#view!alt gallery#expand:alt">View (using shorthand click action)</button>
<button type="button" data-action="click->gallery#expand:ctrl">View (only activate if ctrl is clicked)</button>
<button type="button" data-action="click->gallery#expand:alt:meta">View (only activate if both alt & meta are pressed)</button>

Related links:

• https://stimulus.hotwired.dev/reference/actions
• https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

An even shorter version of the action options...

    ['alt', 'ctrl', 'meta'].forEach((key) => {
      application.registerActionOption(
        key,
        ({ event, value, keyPressed = event[`${key}Key`] }) =>
          value ? keyPressed : !keyPressed
      );
    });

[shouichi]

Cool! Do you think adding those custom action options to Stimulus itself is sensible? They seem common enough.

[lb-]

@shouichi I'm not a core maintainer so not sure.

I'd probably recommend raising an issue that explains the reasoning/use cases.

Then raise a new PR with bringing it into core against that issue.

Worst case scenario if ends up being a good reference for people googling the use case.

My personal opinion - it's probably good to have this in core but risks the action options getting a bit too long, plus documentation/core implementation would need to consider the nuance of this not being suitable for some kinds of events (non pointer/ mouse events).

[shouichi]

Thank you for the tip!

[lb-]

Also. Should probably cover shiftKey.

[dhh]

Even if this is possible already by custom action options, I think it's considerably nicer to have part of the core package 👍