Alpine: Keydown modifier .exact

[danieldevsquad]

The .exact modifier would allow you to control the exact combination of system modifiers needed to trigger an event.

<!-- this will fire even if Alt or Shift is also pressed -->
<button x-on:click.ctrl="onClick">A</button>

<!-- this will only fire when Ctrl and no other keys are pressed -->
<button x-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- this will only fire when no system modifiers are pressed -->
<button x-on:click.exact="onClick">A</button>

[danieldevsquad]

Inspired on https://vuejs.org/v2/guide/events.html#exact-Modifier.

[HugoDF]

Sounds useful & Caleb likes to have feature parity with Vue.js, do you want to have a crack at implementing it?

Otherwise I'll go ahead and do it

[danieldevsquad]

@HugoDF I won't have time do work on it any time soon. Please, feel free to implement it.

[HugoDF]

It turns out click system key modifiers weren't implemented either.

I've added keydown.exact, click.exact without system key modifiers and click.exact with system key modifiers

[HugoDF]

@calebporzio any chance you could have a look at the related PR?

Happy to split it into 2-3 PRs if you prefer

[calebporzio]

Going to hold off on this feature for now. I don't want to add the extra code bloat for a feature only requested by one person.

Let's wait to see if others would benefit, what there use-cases are etc...

Thanks for pitching in everyone!

[ghost]

+1

[liamjoc]

+1

My use case is a chat messaging app. When a user hits enter it should send the message. If the user hits cmd+enter/shift+enter it should not send the message but create a new line. This is how many of the web app messaging apps work.

[gwleuverink]

I've been using this alongside alpine. It's relatively small and works well so far

[clekstro]

I'd like to allow users to select multiple dates from a custom datepicker when pressing ⌘/ctrl and clicking, similar to <select multiple>

[tfwright]

+1

I'd like to use this on an input where enter.exact key triggers some extra UI but cmd.enter submits the form

[HugoDF]

This sounds like something we can revive? cc @calebporzio it's time to weigh whether the added bulk is worth the use case as mentioned by people in this thread.

[santaimark]

+1

[arnarstef]

+1

[dinhkhanh]

+1

A common use-case is form with textarea. Eg: a Comment form is usually a textarea instead of a input. When user write down a comment and hit Enter key, it should submit the form, but hit Shift Enter key combination will create a new line in textarea instead.

[KevinBatdorf]

You can do this now with Alpine:

https://codepen.io/KevinBatdorf/pen/yLeQaGe?editors=1000