Can't use navigation keys (arrow keys, enter etc.)

[on3iro]

Hey,

I just installed solid-ninja-keys and followed the README.

However non of the default shortcuts seem to really work. Most of them entirely. Just escape somewhat works, but it takes multiple presses of esc until it registers.

I put the Ninjakeys component directly next to my App component. Here's my setup:

// index.tsx
import { render } from 'solid-js/web'
import { Router } from '@solidjs/router'
import App from './App'
import './index.css'
import { hydrateStoresFromPersistence } from 'stores/hydrateStoresFromPersistence'
import CommandPalette from 'App/CommandPalette'

hydrateStoresFromPersistence()

render(
    () => (
        <Router>
            <App />
            <CommandPalette />
        </Router>
    ),
    document.getElementById('root') as HTMLElement
)

// CommandPalette
import { NinjaKeys } from 'solid-ninja-keys'

function CommandPalette() {
    return (
        <NinjaKeys
            hotkeys={[
                {
                    id: 'Overview',
                    title: 'Open Overview',
                    hotkey: 'cmd+o',
                    handler: () => {
                        console.log('navigation to overview')
                    },
                },
                {
                    id: 'Settings',
                    title: 'Open Settings',
                    hotkey: 'cmd+s',
                    handler: () => {
                        console.log('navigation to settings')
                    },
                },
            ]}
        />
    )
}

export default CommandPalette

On a side note -> would you mind exporting your types, please? I would like to be able to type my hotkeys array outside of the prop, which I am currently unable to :)

[on3iro]

I just tried integrating ninja-keys without the solid-wrapper and ran into the same issue, so either I am doing something wrong or the current ninja-keys-build is broken :/

(I also opened a simliar issue inside the ninja-keys repo, just for reference: https://github.com/ssleptsov/ninja-keys/issues/49)

[wobsoriano]

Would you be able to make a basic repro via stackblitz or send a repo here that I can play with?

[on3iro]

@wobsoriano sure thing (but probably not today) :)

[on3iro]

hm, I just tried it on stackblitz and couldn't reproduce the issue. So it must be somewhat specific to my setup. Maybe it has something to do with the application running in a webview? (using Tauri) Though I also ran vite without Tauri and had the same issue...

[on3iro]

Ah, one thing I found out: as soon as I remove my <Routes /> it does work apparently. So it probably has nothing to do with Tauri or the webview

[wobsoriano]

Are you using sse / solid-start for some reason? If yes, what happens of you wrap it in a clientOnly function?

[on3iro]

nope, this is not a Solid-Start project, all client-side-rendered 😬

[on3iro]

So no matter where I put the my <CommandPalette /> - whenever I remove my Routes, it does work. This could mean two things:

1.) something doesn't work in conjunction with the router 2.) something else in my component tree wreaks havoc

[on3iro]

Ok, it seems to be 2.), damn - I'll have to narrow this down an will report back. So as it stands its likely not an issue with your wrapper nor with ninja-keys :+1:

[on3iro]

~~Ok, as far as I can tell solid-dismiss is interfering with ninja-keys in some way.~~ - false alarm, it appears to happen inside the subtree of my dismiss-menu

[on3iro]

hm, it seems to be an interaction with solid-select. But I can't reproduce this in a stackblitz either... I'll have to take a look at this with a fresh mind over the next couple of days

[on3iro]

Ok, pretty sure it's got something to do with the select, here is a reproduction on stackblitz: https://stackblitz.com/edit/solidjs-templates-dz5buc?file=src%2FApp.tsx

[on3iro]

@wobsoriano I am not too familiar with how solid handles events, but it seems that they way ninja-keys as regular js-library handles them might clash with solid in various cases. See https://github.com/thisbeyond/solid-select/issues/46#issuecomment-1633820637. So apparently an input with a regular keydown-handler is able to throw off solid-ninja-keys. Is there a way to prevent this? If you guide me a bit, I could also work on this and create PR, if you want. :)