I have a suggestion for improvement.

The blockIfAnyTextboxSelected attribute - if true, it does not run the command as long as any text box is selected on the page (input[type=text], [contexteditable=true], textarea).

<Keydown blockIfAnyTextboxSelected={true} on:key={ ({detail})=> detail==="w"&& fun() } />

The point is that the command should not be invoked when typing in a text field.

But input input[type=number] would not be taken into account by blockIfAnyTextboxSelected - or block it in a separate way, maybe with a separate attribute...
Without it, you have to prepare a complex checking function and add it to the command.

Another improvement would be to make a 'detail' attribute which causes the command to only run if detail matches:

<Keydown detail="w" on:key={()=> fun() } />

or

<Keydown details={["w","s"]} on:key={()=> fun() } />

...thanks to this, the function itself can be simplified - as you can see.

You can think of better names for blockIfAnyTextboxSelected and detail/details. :)

What do you think?

Code:

<Keydown
	pauseOnInput
	paused={isSelectActive}
	on:combo={ e => ["Shift-ArrowRight","Shift-d"].includes(e.detail)&& nCanal() }
/> 

Steps:

1. Press and hold Shift
2. At the same time, I press ArrowRight
3. I release ArrowRight
4. Press ArrowRight
5. I release ArrowRight

Effect:

1. Shift
2. Shift-ArrowRight
3. _
4. ArrowRight
5. _

So you can't repeat Shift-ArrowRight while holding Shift all the time.

Want:
To make pressing ArrowRight again to do the Shift-ArrowRight combo.

Additionally:
You might think of a syntax like this:

<KeydownD
	pauseOnInput
	paused={isSelectActive}
	details={["Shift-ArrowRight","Shift-d"]}
	fn={nKanal}
/>

Or also:

<KeydownD
	pauseOnInput
	paused={isSelectActive}
	details={e=>e.detail>=1 && e.detail<=canals.length}
	fn={fn}
/>

It's about separating the function call from the condition. This gives more transparency.

There's a subtle, rather significant, UX difference between the two.

The event should fire on keydown and not on the keyup event.

E.g.,

if (
  document.activeElement instanceof HTMLInputElement ||
  document.activeElement instanceof HTMLTextAreaElement
) {
  // Exit early if an inputtable element is already focused.
  return;
}

if ((e.metaKey && e.key === 'k') || e.key === '/') {
  e.preventDefault();
  // Fire matching event
}

From Svelte documentation (https://svelte.dev/docs#run-time-svelte-createeventdispatcher)

Component events created with createEventDispatcher create a CustomEvent. These events do not bubble and are not cancellable with event.preventDefault()

However, if you pass a function which calls the original keyboard events preventDefault , you can use it from
svelte-keydown event handler. I just missed that one to prevent site scrolling on space key

Keydown.svelte

  on:keydown={(evt) => {
    let { key, target} = evt
...

  dispatch("key",   { key, preventDefault: () => evt.preventDefault() });
}

App.svelte

<Keydown
  pauseOnInput
  on:key={(e) => {
      e.detail.preventDefault()

      console.log("Keydown event, key: ", e.detail.key)
  }}
/>

something like that

Originally posted by @notYou263 in #9 (comment)

The keyboard event for space key is
KeyboardEvent: key=' ' | code='Space'

This leads to call of dispatch with key value ' ' for space key.
Mapping it to 'Space' would be great so one can use on:Space on a component as like for Enter and Escape

Hello,
I'm a newbie. I'm trying to use svelte-keydown to focus the input (or to open a modal) of my blog search bar with a keys combo. I'd like to reproduce the Meta+k use of the tailwindcss docs site.

Any suggestion?

Thanks