satelllte/react-knob-headless

Releasing over a button or link fires it

eprincen2 opened this issue · 5 comments

eprincen2 commented

I'm having issues where if I use the knob and I let go of my mouse button over a button or link on the page, it sends a click and triggers the action.

Example:
Go to this page ( https://react-knob-headless.vercel.app/ ) and use any of the demo knobs. Let go of your mouse button over a "View source" link and the page will open.

satelllte commented

Hi @eprincen2 👋🏻

Thanks for checking out the repository and trying out the knob. I'm not really sure if there's something wrong with this interaction and I couldn't see it's blocking the links or firing them whenever it shouldn't. Could you please give some more details and exact reproduction steps?

Also, please note that the interaction itself is handled by pmndrs/use-gesture, which is a well-known and good utility for such kind of things. So if you notice something wrong directly with it, you might want to report it to pmndrs' repo.

Here's how the interaction works on my side (circle around the cursor means I'm holding left mouse button down):

knob-mouse.mov

UPD: if I release the mouse button being on top of the link, it works fine either, the link doesn't get clicked

eprincen2 commented

Hi satelllte,

I'll try to give you a bit more detail on Monday. Currently having a full weekend. I do find it interesting that if I release the button on the "View source" link you have in the video below, the link opens in a new page.

Other than this issue, this knob is exactly what I need and I appreciate the way you implemented it. I'll be happy to contribute if I find anything I can add that will be useful to the project.

  • 👍1
eprincen2 commented

Hi satelllte,

It doesn't happen in Chromium, but it does happen in Firefox. Both on Linux. I'll see what I can find about use-gesture possibly having a Firefox problem.

  • 👍1
eprincen2 commented

Hi satelllte,

I ran out of time yesterday to explore this further. If I come across anything in the future I will let you know. I'll return to the project I am using the knob on some time later, and I have to move on to something else currently. You may want to take a quick look at your demo page in Firefox and see if you can reproduce the issue. Nothing was obviously causing it when I looked at the react-knob-headless source or use-gesture.

satelllte commented

Hi @eprincen2 👋🏻

I was able to reproduce it in Firefox on MacOS. This is how it works in use-gesture either. I believe this is something how it works on Firefox's engine level, and I'm not really sure if it's fixable.

How to reproduce:

  • 👍1