Bug: event not bubbling to root on iOS Safari

This issue has been created 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-09-26
Star Count 195293
Watcher Count 6655
Fork Count 40426
Issue Count 1113

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
During onboarding, the upload button should be disabled until a project name is set 1 2021-09-28 2022-07-24
Please may Lospec Pixel Editor be liberated? 0 2022-01-31 2022-09-13
CC 3.4.2 - WebP support on iOS 8 2022-03-16 2022-07-22
new term request: prolapsed 0 2022-07-11 2022-08-08
iOS - how to tell if device is already paired 3 2021-02-04 2022-07-09
Issue: (Beta) Dashboard "settings" button does not show settings. 1 2021-11-25 2022-09-16
Codebuild install fails because SES_ENDPOINT is undefined 1 2022-03-31 2022-09-11
did you missed "influxdb_export.h"? 4 2021-05-10 2022-09-02
[CK2/CM components] unifying tags 8 2022-04-06 2022-08-10
Media queries problem 1 2019-12-21 2022-09-02
ykdl --format=LD https://www.iqiyi.com/v_1rb60r0ocgw.html下载失败 4 2022-01-19 2022-08-06
3.1.3 build error on RHEL 7 8 2021-10-19 2022-09-17
Getting error while running...model = dc.models.MultitaskClassifier(n_tasks=12, n_features=1024, layer_sizes=[1000]) 3 2022-05-26 2022-09-09
UniqueMulti rule does not report the error correctly 1 2021-05-26 2022-08-07
'save' button for saving reports take user to 'open' box 2 2022-02-11 2022-09-10
Support Cupertino for iOS 2 2021-10-14 2022-09-19
一个页面中同时有多个编辑器时输入内容后光标会自动跳转到最后一个编辑器内 1 2022-03-08 2022-07-23
tensorrt plugin error? 3 2021-12-23 2022-08-30
Unable to import sass files if react-md was installed with npm and React 16 1 2021-12-18 2022-08-29
[New Chain / Network] Mumbai 0 2022-01-01 2022-08-27
NgbCheckbox: cannot set the active property of the ngbButtonLabel 4 2021-08-13 2022-09-24
[BUG]Deployment not work in 2.9 1 2021-07-01 2022-07-20
Add ensureNeverFrozen to MutableValue 0 2022-05-28 2022-09-15
TouchEnd event is fired before finger leaves the screen when dragging is disabled 5 2017-08-31 2022-09-07
Deep diving no path found 1 2021-02-16 2022-09-15
There is no need to add ExchangeNode upon SchemaScanNode 0 2021-09-17 2022-09-04
[auto_animated] cannot use scrollBar widget for LiveList widget 0 2020-12-29 2022-07-26
Package emacs-ghub-20220429.1708 fails to build 3 2022-05-25 2022-09-09
Any example on this? 1 2019-07-30 2022-07-26
Limit the num of failure entries per control check in cluster compliance detail report 0 2022-04-04 2022-09-01
Parent class vtable failed to initialize, due to: VTable setup of type AndroidX.SwipeRefreshLayout.Widget.SwipeRefreshLayout 7 2021-08-10 2022-08-17
MSBuild.exe is not in the Path 2 2021-04-12 2022-09-15
Allow `use_args` to accept `marshmallow.Field` 1 2021-05-20 2022-08-04
native-image failed to build class to executable file. 3 2022-05-02 2022-08-01
[LLVM] pthread_getspecific crash 1 2022-05-03 2022-09-05
Fails to build native image for Scala 3 application which uses kind-projector 4 2022-05-03 2022-08-30
Patch comment visibility 1 2022-06-03 2022-09-17
Documentation comments seem to be one line long 0 2022-03-24 2022-09-18
overzealous sanitisation of task environment debug log 2 2022-08-26 2022-09-25
Back Control 2 2021-02-28 2022-01-11
Update FormatTimestamp filter to handle nanosecond precision timestamps 0 2022-01-05 2022-09-18
Paddle无法申请显存,Out of memory error on GPU 0 4 2022-05-09 2022-09-16
Paddle-Lite端侧部署:执行命令make ARM_ABI=arm8报错 3 2022-02-26 2022-09-12
`TestRoleDeletionDrift` flakiness 1 2022-08-24 2022-08-21
TF Plan Reports Changes in Error, TF Apply Ignores Them 2 2021-10-14 2022-09-25
[Feature] Enhance metrics on dashboard 0 2022-04-14 2022-09-25
Typo: 'occured' -> 'occurred' in comment 0 2021-08-15 2022-08-30
\includegraphics{} does not autocomplete filenames 6 2022-04-12 2022-08-30
Console.OutputEncoding by default returns a wrong value on Windows Nano Server 4 2020-10-01 2022-09-17
Remove support for Heroku-16 1 2021-05-27 2022-09-15