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

[Theo Salzmann]

Hey folks,

I am currently trying to integrate ninja-keys into my solidjs-app and tried to do so via the solid-wrapper as well as by using ninja-keys as standalone library. However
All basic navigation shortcuts on the modal don't seem to work for me (arrow keys, enter, esc etc.)

Any idea what I could be doing wrong?

// 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

Thanks in advance :)

[Theo Salzmann]

seems to be an issue deep inside my code - not an issue with this lib

[oli]

Hi @on3iro, just came across your issue too. Worked out that, at least for me, it was due to solidjs event delegation modifying the event target, which made the default hotkeys filter filter out events when focused on the command palette input.

I hope you found a workaround, but for anyone else that may have this issue, until (if) the fix gets merged, some possible workarounds include:

• disable event delegation (globally)
• put ninja-keys at the root of your app and before the rest of your app is loaded, so that it runs before any other components with keys event handlers are run - this makes it hotkeys-js hook up it's event listener on document before solid does.
• set the hotkeys filter to be a function that returns true