I use variations of <CardActionArea onClick={someFunction}>
throughout my React app, and I've come across an instance where clicking the card does not fire the onClick function. This is only when the component is rendered in a certain tree, in all other parts of the app it works as expected. I'm using in Algolia's react-instantsearch-dom
component in my component that's giving the issue.
The ripple effect (the animation that shows the user clicked the card) fires in every situation. So it doesn't seem to be something as simple as a transparent div overlaying the card. Below is a working component tree compared to the one with the issue:
One odd thing you can see above is both CardActionArea
components show an empty onClick
. But the function still works in most cases.
I'm using onClick={() => console.log('click')}
to test, so it doesn't appear to be an issue with the function itself. Any ideas on what could prevent the onClick even from firing, or suggestions for troubleshooting would be appreciated.
Edit: This issue doesn't happen in iOS Safari, but it does occur in Firefox.
Edit 2: Since I don't understand this well enough to reproduce it, and it doesn't appear to be something obvious in the code, I'm looking for troubleshooting advice. Is there something in Chrome's developer tools I can use to trace this behavior?
The issue was the anonymous component between Article and CommentEditor. The component was rendered into a Dialog conditionally, and removing the condition so that it always rendered when the Dialog was open fixed the issue.