react
react copied to clipboard
facebook
Bug: Safari div contentEditable，onMouseUp trigger before onMouseDown
React version: 17.0.1
Steps To Reproduce
- Mac OS Big Sur version 11.2，Safari version 14.0.3
- set div contentEditable
- div addEventListener onMouseUp and onMouseDown
- onMouseUp trigger before onMouseDown
Link to code example:
<div
onMouseDown={() => {console.log('mouse down')}}
onMouseUp={() => {console.log('mouse up')}}
suppressContentEditableWarning
contentEditable>
Test ContentEditable In Safari
</div>
The current behavior
onMouseUp trigger before onMouseDown
The expected behavior
onMouseUp trigger after onMouseDown
Would you just try again!. When i wrote the same code you shown me above it works fine!
I tried it again and when I tap the touchpad with one finger, In the first time mouse event works fine, But in the next time I tab the touchpad, the mouse event will be reverse.
I cannot reproduce this in Safari 16.0: https://zsgyov.csb.app/
For anybody able to reproduce this in the latest version of React, could you include a video so that I can understand better how you were able to reproduce?
I cannot reproduce this in Safari 16.0: https://zsgyov.csb.app/
For anybody able to reproduce this in the latest version of React, could you include a video so that I can understand better how you were able to reproduce?
I suspect that this is related to the third-party IME. When switching to a third-party IME (such as Sogou, Baidu IME), this problem sometimes occurs.
@eps1lon see this video for more detail: https://drive.google.com/file/d/10GMslCbibwmuLBwyX8o3t0IjnEgsX3Tt/view
I cannot reproduce this in Safari 16.0: zsgyov.csb.app For anybody able to reproduce this in the latest version of React, could you include a video so that I can understand better how you were able to reproduce?
I suspect that this is related to the third-party IME. When switching to a third-party IME (such as Sogou, Baidu IME), this problem sometimes occurs.
@eps1lon see this video for more detail: drive.google.com/file/d/10GMslCbibwmuLBwyX8o3t0IjnEgsX3Tt/view
Interesting. Thank you for providing more detail.
What happens if it's just using basic JavaScript? https://szsb2m.csb.app/
I cannot reproduce this in Safari 16.0: zsgyov.csb.app For anybody able to reproduce this in the latest version of React, could you include a video so that I can understand better how you were able to reproduce?
I suspect that this is related to the third-party IME. When switching to a third-party IME (such as Sogou, Baidu IME), this problem sometimes occurs. @eps1lon see this video for more detail: drive.google.com/file/d/10GMslCbibwmuLBwyX8o3t0IjnEgsX3Tt/view
Interesting. Thank you for providing more detail.
What happens if it's just using basic JavaScript? https://szsb2m.csb.app/
I've tried to use basic JS, and get the same result in Safari.
It seems that if there is some thing contenteditable in <body> and using third-party IME(and Mac's setting should be allowing tap to hold), mousedown/mouseup events will not be in order.
https://jsbin.com/lewekucese/edit?html,js,console,output @eps1lon
So it sounds to me this should also be opened as a Safari bug. Maybe that way we understand how this happens and if there's a fix that we can possibly include in React.
- Does it still reproduce in the current version of Safari Technology Preview 177 or 178.
- Was a bug opened on https://bugs.webkit.org/ for this?
I came across the same problem, onMouseUp is triggered before onMouseDown and onClick requires tapping twice to trigger.
I found that only happens when you switch mac's Input Source to Japanese - Romaji or some third party Chinese Input Methods like Sogou or Wechat.
I'm able to reproduce this in latest Safari (Version 17.1 (19616.2.9.11.7)) and Safari Technology Preview
related bug report: https://bugs.webkit.org/show_bug.cgi?id=219670 I also commented there
going to https://zsgyov.csb.app/ And doing one tap.
[Log] 2023-11-28T04:06:04.942Z pointerdown (x2)
[Log] 2023-11-28T04:06:04.942Z mousedown (x2)
[Log] 2023-11-28T04:06:04.942Z react-mousedown
[Log] mouse down
[Log] 2023-11-28T04:06:04.943Z pointerup (x2)
[Log] 2023-11-28T04:06:04.943Z mouseup (x2)
[Log] 2023-11-28T04:06:04.943Z react-mouseup
[Log] mouse up
[Log] 2023-11-28T04:06:04.944Z click
[Log] 2023-11-28T04:06:04.948Z click
[Log] 2023-11-28T04:06:04.948Z click
[Log] 2023-11-28T04:06:04.948Z click
[Log] 2023-11-28T04:06:04.951Z selectionchange
[Log] 2023-11-28T04:06:04.952Z selectionchange (x2)
REALLY Switching to Japanese Input Mode.
[Log] 2023-11-28T04:13:56.001Z selectionchange
[Log] 2023-11-28T04:13:56.002Z selectionchange
[Log] 2023-11-28T04:13:56.037Z pointerup (x2)
[Log] 2023-11-28T04:13:56.037Z mouseup (x2)
[Log] 2023-11-28T04:13:56.038Z react-mouseup
[Log] mouse up
[Log] 2023-11-28T04:13:56.040Z pointerdown
[Log] 2023-11-28T04:13:56.041Z pointerdown
[Log] 2023-11-28T04:13:56.041Z mousedown (x2)
[Log] 2023-11-28T04:13:56.041Z react-mousedown
[Log] mouse down
[Log] 2023-11-28T04:13:56.044Z selectionchange
~~Is there something I'm missing.~~ ~~Or a configuration I need to set?~~
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!