Releasing over a button or link fires it

[eprincen2]

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]

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]

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.

[eprincen2]

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.

[eprincen2]

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]

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:

• Go to https://use-gesture.netlify.app/docs/options/#axis
• See the radio button is set to "X axis"
• Start dragging the box and release the mouse over different radio button value ("Y axis" or "No axis lock")
• See the radio button got clicked