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:
- Created 2 years ago
- Comments:9 (6 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

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!
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.