Bug: event not bubbling to root on iOS Safari

This issue has been tracked since 2022-09-21.

We have a div element with an onClick and onDoubleClick function. Prior to React 17/18, this worked consistently throughout all browsers. However, from the moment we've upgraded to React 18 (also reproducible on React 17), this stopped working on iPhones running Safari.

I assume this is because of the event propagation changes in React 17. It does work on Safari on MacOs, and on all mobile Android browsers too. So only iOS' Safari behaves differently.

Our component looks like this:

<div
      className="slideshow-preview"
      onClick={onClickFnc}
      onDoubleClick={onDoubleClickFnc}
      ...

This is the component in its default state:
image

When clicking once, some resizing handlers appear (the onClick method)
image

When double clicking, the crop modus appears (the onDoubleClick method)
image

This onDoubleClick won't trigger on iOS.
Tested on

  • iPhone 12 running iOS 15 and 16
  • iPhone 14 emulator running iOS 16.

HOWEVER. After looking through the React 17 upgrade blog's potential issue fixes part, I tried to apply a suggested fix to my code.

So in my component, I added this piece:

useEffect(() => {
      document?.addEventListener("dblclick", onDoubleClickFunc);
      return () => {
	      document?.removeEventListener("dblclick", onDoubleClickFnc);
      };
}, [onDoubleClickFunc]);

and now it works consistently! But it looks kinda hacky and I'm not a fan of it.

Is there a possibility by chance that there's a bug in Safari and/or React or am I doing something wrong? Would love if someone could explain me.

Thanks in advance

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-10-06
Star Count 195649
Watcher Count 6648
Fork Count 40524
Issue Count 1110

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date