Issue with event delegation and a native library
Hey folks,
I am currently trying to integrate a command palette library into our app. I tried various libraries and eventually ended up with solid-ninja-keys/ninja-keys. However there is one issue: solid-ninja-keys seems to be just a small wrapper around ninja-keys, ninjakeys itself seems to reliy on regular input events (e.g. keydown). Now when I have something with a keydown handler in my app (in my case it's a select field from solid-select) ninja-keys will no longer work (you can press cmd + k and the overlay appears, but all other shortcuts won't work).
I have recreated the issue here: https://stackblitz.com/edit/solidjs-templates-dz5buc?file=src%2FApp.tsx
So now I am wondering two things:
1. is there an easy way to fix this?
2. How hard is it in general to integrate regular js libraries into solid - is it as "hard" as in react or as "easy" as with svelte (I've only used react for many years and jumped to solid instead of svelte, but heard that svelte is pretty strong in that regard)
Thanks in advance
18 Replies
is the issue that solid-select or some library is calling e.preventDefault which prevents other library from working?
that doesn't sound too solid specific
maybe solid-select should have an option to not prevent bubbling?
No, it doesn't seem to be an issue with solid-select. It's enough to place anything with an
onKeyDown into the tree to make ninja-keys no longer work:
e.g. you could replace the select with an input:
https://stackblitz.com/edit/solidjs-templates-janwk2?file=src%2FApp.tsxI don't really understand the example
nothing changes if the input is in focus or not
and the button changes signal wired to nothing
I'm confused 😅
ah sorry, that's some old stuff from experiments - i'll try to clean that up 😄
no this should be as minimal as it gets 🙂 https://stackblitz.com/edit/solidjs-templates-3mubr1?file=src%2FApp.tsx
how does exactly ninja-keys work?
where does it attach the events?
I feel like it should be replaced with plain addEventListener to really understand what might be the limitation
Yeah, I have not yet dug into the ninja-keys code tbh, so I don't know. I wanted to ask first if there is any known limitation, before I jump into that rabbit hole 😅
ah I know why nothing work for me
I'm on windows
it's cmd not ctrl...
😅
now I see
this might be the default of inputs - to stop the propagation if the input is in focus
I've just changed
onKeyDown to on:keydown which just attaches a normal - not delegated event listener, and the result is the same
in which case the on:keydown is not even neccasseryBut why does that even happen when the input isn't in focus?
what do you mean?
when the input isn't is not in focus ninja-keys seems to be firing the event
ahhh wait, we are talking about different inputs. You mean the input inside the dialog, right? I was talking about the input preventing the event.
what dialog? 😅
the thing that opens when you press cmd/ctrl + k
yeah I got it
it is weird
it's especially weird, because the dialog works fine as soon as you remove the other input from the JSX
you can then even have focus on the input
it's really strange
though it looks like ninja-keys hasn't been actively maintained for quite some time, so I am probably out of luck here. I also created a PR on another solid command palette library which had really outdated deps and at least the maintainer recongnized it, but it got stuck (it's not quite done, yet but I need feedback from the maintainer).
Now I am close to writing my own thing... 😬
Anyway, thanks for looking into this @thetarnav 🙂
np
I'm still confused about why the delegated events prevent it from working
cannot reproduce it with normal event listeners..