question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Button not working for all vendors that control onClick handler with delegated events

See original GitHub issue

🐛 Bug Report

🤔 Expected Behavior

Button works with delegated events like onClick

😯 Current Behavior

Button prevent or not receive onClick handler from delegated event.

💁 Possible Solution

Manually handle onClick prop and call it alongside with onClick prop generated from hook.

🔦 Context

I try to use Fancybox It add global click event handler for all [data-fancybox] (or user custom selector) elements. If I add this attribute to react-spectrum button - nothing happens, modal is not opening when I click. If I do this for simple div or button - anything works fine.

💻 Code Sample

https://codesandbox.io/s/nervous-lamport-2mo5yh

🌍 Your Environment

Software Version(s)
react-spectrum latest
Browser Chrome
Operating System MacOS

🧢 Your Company/Team

🕷 Tracking Issue (optional)

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9 (6 by maintainers)

github_iconTop GitHub Comments

3reactions
snowystingercommented, Mar 5, 2022

We do want to solve this generally, but we haven’t come up a solution we like yet. I’ll look more at your code next week. Thanks!

0reactions
snowystingercommented, Mar 10, 2022

While working on this, it’s come to our attention that canceling touchEnd (https://developers.google.com/web/updates/2017/01/scrolling-intervention) may be the more appropriate solution. You can see that in this codesandbox, which shows how this works with buttons that aren’t the React Spectrum buttons https://codesandbox.io/s/quirky-williamson-lwtpv0?file=/src/App.js

Otherwise you need to put touch-actions: none on the button so that the browser doesn’t think that touchstart is a scrolling event, this is something we already have on the RSP buttons and why touchstart appeared to work as intended.

Hopefully will have more updates on solving this in our code, but for now, this is the best workaround I can provide.

Other notables: https://docs.google.com/document/d/12-HPlSIF7-ISY8TQHtuQ3IqDi-isZVI0Yzv5zwl90VU/mobilebasic If you do not use click, then you will not have the issues described in this issue. As such, it could be enormously helpful to encourage other libraries to correctly implement pointer events for the reasons described in this document.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Event delegation not working on dynamic buttons
At first I was trying to use the onclick function to redirect to the userSelect function but when that failed I looked around...
Read more >
Introduction to events - Learn web development | MDN
The <button> element has an event called 'click' that fires when the user clicks the button. Objects that can fire events have an ......
Read more >
Event delegation - The Modern JavaScript Tutorial
In the handler table.onclick we should take such event.target and find out whether the click was inside <td> or not.
Read more >
Handle events by using delegates in C++/WinRT
This topic shows how to register and revoke event-handling delegates using C++/WinRT.
Read more >
OnClick on button from code - Unity Forum
Have you tried referring directly to the function as a delegate, as opposed to creating an in-line delegate that calls the function?
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found