web dev question

This content was marked as sensitive. Click to reveal

SOLVED! See my followup post

I ran into a weird issue at work that ate up a few hours the other day. I was implementing a simple toggle button in React and if I clicked it say 10 times in 5 seconds, only ~9 of the times would register. I did a performance audit and it turned out that onclick was occasionally not firing, but onpointerup consistently worked.

So I bound the eventlistener to onpointerup, which solved the problem but... what could be the root issue? Any ideas?

6
Share
Share on Mastodon
Share on Twitter
Share on Facebook
Share on Linkedin
eevee 🦊

@darius if you clicked fast enough then almost certainly some of them registered as double-clicks, so that sounds like it was correct behavior

1
1y
Bill Hunt
This content was marked as sensitive. Click to reveal

@darius one common cause for this is that your pointer has moved slightly during the click and is no longer over the element - which may have moved or transitioned or had a state change during the event. onclick requires both a down and an up on the same element to fire.

1
1y
🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸

@darius do your pointerdowns and pointerups add up or are some of those missing?

1
1y
Rag. Gustavino Bevilacqua
This content was marked as sensitive. Click to reveal

@darius

Uhm… did you try with different clicking devices, just to be sure it's not a mouse issue?

Sounds odd… but at least you can exclude that.

0
1y
Pepper Annt
This content was marked as sensitive. Click to reveal

@darius In case your bug only repros in Chrome and not in Firefox, you may be running into this bug: bugs.chromium.org/p/chromium/i

1
1y
Darius Kazemi
This content was marked as sensitive. Click to reveal

Thanks to @annmygdala. This Chrome bug is what I'm running into. I cannot reproduce it on Firefox, and I am in fact changing the visual state of the button by removing and reattaching an icon, so, this has gotta be it: bugs.chromium.org/p/chromium/i

1
1y
Replies