[bug] keybing triggered unexpectedly even when the palette is not visible

[litanlitudan]

Hi folks,
Thanks for creating such a cool project, really a great job!

I tried to integrate this module into one of my projects and noticed that the keybinding got overwrote unexpectedly.
For example, once I add the component to my app, my upArrow key won't work anymore, even without the palette being visible.
I noticed that in the codebase, svelte-command-pallete disable the default behavior of the keystroke:

svelte-command-palette/src/lib/components/CommandPalette.svelte

Line 112 in d09b60d

event.preventDefault();

Is it possible to only enable the logic when the palette is visiable?
Also, there might be something wrong with my setup, as I am still learning svelte :)
Here is how I integrated the svelte-command-pallete
In file /component/commandPallete.svelte

<script lang="ts">
    import CommandPalette, { defineActions, createStoreMethods } from 'svelte-command-palette';

     // define actions using the defineActions API
    const commands = defineActions([
        {
            actionId: 1,
            title: "Open Svelte Command Palette on github",
            subTitle: "This opens github in a new tab!",
            onRun: ({ action, storeProps, storeMethods }) => {
                if (!storeProps.isVisible) {
                    return;
                }
                window.open("https://github.com/rohitpotato/svelte-command-palette");
            },
            shortcut: "Space k"
        }
    ]);
</script>

<CommandPalette {commands}/>

How I reference the component in the main app.svelte is as the following

<script lang="ts">
    import CommandPalette from "./components/CommandPalette.svelte";
</script>
<main>
  <CommandPalette/>
</main>

Any help is appreciated, thanks!

[rohitpotato]

Hey thanks for pointing this out, i have identified the issue and looking into this, thanks!!

Sorry for the late response I am not receiving mails from github for some reason

[rohitpotato]

@litanlitudan Can you reproduce this in a codesandbox or a screencast maybe to get a better idea of what's happening?

[flare-s]

This is how I got it to work, basically copied your condition to another method. Hope this help people with the same issue in the future.

canActionRun: ({ storeProps}) => { if (!storeProps.isVisible) { return false; } return true; },

for context this method can be added inside the "defineActions" object

[rohitpotato]

I think i'll make a bug fix for this, by adding this condition before the action executes. Thank you for this @flare-s . Let me know if you want to take a shot at this. If not, I'll publishing a new version soon

[rohitpotato]

@litanlitudan This is a feature, keyboard shortcuts are meant to run when the palette isn't visible. You can use @flare-s 's solution to fix or not define keyboard shortcuts at all.

[flare-s]

@rohitpotato Sorry, life been hectic lately, but my colleague found a better way to implement this. Will share it once I have the code. Also, I wanted to say this package is really awesome! Thanks for sharing it with us.

[flare-s]

Basically, he Added this bit
if (!$paletteStore.isVisible) { return; }

To the handleArrowUp and handleArrowDown functions in the CommandPalette.svelte file.

[codenius]

This is problematic for the Enter-Key too, since you can not trigger buttons and links with Enter anymore.

Therefor, the fix @flare-s pointed out first can not be applied.

canActionRun: ({ storeProps}) => { if (!storeProps.isVisible) { return false; } return true; },

I think it is necessary to implement the solution @flare-s propesed later or similar to run keyboard shortcuts used internally only while the modal is open and not prevent the default actions while closed for e.g. Enter. Except for Ctrl + k, of course.

if (!$paletteStore.isVisible) { return; }

[rohitpotato]

Let me publish a new version based on the above feedback.