Ignoring Hotkeys not working

[wesbos]

Ignoring Hotkeys not working

[wesbos]

thanks so much for the clarification here! Your approach is about what I was thinking so I apprecaite you showing me that! Will have it implemented soon

[vnphanquang]

@wesbos thank you for reporting. When shortcut is placed on window, it's essentially window.addEventListener('keydown', ...). So the event has already reached window by the time your callback executes, calling preventDefault or stopPropagation effectively does nothing useful (except cases when you want to prevent browser default, for example overriding ctrl/cmd+k) .

That newly added example snippet might have been misleading, my apologies! I'll adjust to clarify this.

In your use case I think the issue can be resolved by either:

1. checking for target in each callback, or
2. use a 'centralized' on:shortcut event handler and check for target there before doing anything else, just as you wrote in syntaxfm/website#1464 (comment)

For example

1. turn your handlePlayPause into:

   function handlePlayPause(detail) {
     if (ignoredTags.include(detail.originalEvent.target.tagName)) return;
     // ...
   }

2. turn your setup into the following:

   <script>
     // your src/lib/hotkeys/Hotkeys.svelte
     // ...
   
     const allTriggers = [
       // can reuse your hotkeys object here
       ...Object.entries(hotkeys).map(([id, hotkey]) => {
         // exclude callback here and use in onShortcut bellow
         const { callback, ...trigger } = hotkey.trigger;
         return {
           id,
           ...trigger,
         };
       }),
     ];
   
     function onShortcut(event) {
       const detail = event.detail;
       const { originalEvent, trigger } = detail;
       const ignoredTags = [`INPUT`, `TEXTAREA`, `SELECT`, `OPTION`, `BUTTON`];
       if (ignoredTags.includes(originalEvent.target.tagName)) return;
       hotkeys[trigger.id].trigger.callback();
     }
   </script>
   
   <svelte:window use:shortcut={{ trigger: allTriggers }} on:shortcut={onShortcut} />

   I try to reuse your code here, which makes it not so elegant but I hope the idea gets through.

If you think the API is not ergonomic enough, I'd love to hear what public interface you have in mind.

---

ps thanks for using this I never thought something i write would be used by wesbos himself.