Svelte: Add support for keyboard and mouse button modifiers for the on: directive.

Created on 18 Feb 2020  路  3Comments  路  Source: sveltejs/svelte

Is your feature request related to a problem? Please describe.
I am coming from Vue.js and really like Svelte and the concepts it promotes.

One feature that Vue offers that I have become spoiled by, however, is their "Key" and "Mouse Button" modifiers for event listeners. I have noticed that Svelte also has modifiers for the on: directive. Which is coded like: on:eventname|modifiers={handler}. This is documented on svelte.dev.

This is great; but when listening for keyboard or mouse-specific events like keyup, keydown, or middle (a mouse button modifier); Vue goes the extra mile by providing additional modifiers that make coding a real pleasure. Here is an example: <input @keyup.enter="doSomething">. Now I don't have to code a keyCode check for the enter key. WooHoo!

An example of how this might look in Svelte is on:keyup.enter={doSomething}. With these nuanced modifiers the lazy spoiled coder that I am no longer has to add this line in my 'doSomething' function: if (event.key !== 'Enter') return;

Describe the solution you'd like
I would love it if all the modifiers that Vue has, could be added to the on: directive. This includes these keyboard modifiers: .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right, .ctrl, .alt, .shift, and .meta
and these mouse button modifiers: .left, .right, and .middle,
as well as the .exact modifier.

The documentation and code can be found here:
Vue Key Modifiers Documentation
Vue System Key Modifiers Documentation
'v-on' API Documentation
'v-on' Source Code

Describe alternatives you've considered
So far I have just hand-coded something like this in the event handler function: if (event.key !== 'Enter'

How important is this feature to you?
This would be a nice extra to have, but I can do without it if you really don't want to provide. It just makes coding in Vue templates a real pleasure. One that I would love to see Svelte rock!

Additional note
I just wanted to take a moment to thank you for all the work you have done and your time considering this request.

proposal

Most helpful comment

I can see how this is tempting to add but if you look at the actual code you need to write it yourself you're saving at most a handful of characters:

````

{name}

````

All 3 comments

I can see how this is tempting to add but if you look at the actual code you need to write it yourself you're saving at most a handful of characters:

````

{name}

````

I sort of like the proposal, but I feel like the point @burningTyger has made is very much more in the Svelte mindset - rather than have a huge expansive API, extensive documentation, and steep learning curve, we can rely on features the language / browsers already provide in order to make Svelte a powerful yet simple solution for building interfaces.

This has come up before in this comment and (sort of) in this issue and probably in other places. I'm also of the mind that this is something that should just be done in javascript, rather than adding to svelte's API.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

noypiscripter picture noypiscripter  路  3Comments

Rich-Harris picture Rich-Harris  路  3Comments

robnagler picture robnagler  路  3Comments

davidcallanan picture davidcallanan  路  3Comments

Rich-Harris picture Rich-Harris  路  3Comments