I'm having a strange issue where a click event on a button doesn’t get triggered in React. The function passed to the button onClick handler (sporadically) wouldn't run on click, so I added this event listener to the body so I could log the event object:

document.body.addEventListener('click', (e: any) => {
  console.log('test, e: ', e)
})

I could see that, when the button's onClick callback is run, the event object's path property looks like this:

The element button.Buttonstyles__ButtonWrapper... is the event target, the element that triggers the click event, which bubbles up until it reaches the Window.

But when it fails to run, the event object's path property looks like this:

It's as if the button didn't "receive" the click event. It should have been the event target. Instead, some parent element was the target - in this case, div.sc-bdvvaa.bmpHsj, but sometimes it was some other parent element higher up.

This happens (seemingly) sporadically (most times it works).

Any ideas?