Bug 219670 – Setting a different IME (for example) reorders the mouseDown/mouseUp events on tap to click on macOS

• Component: UI Events
• Status: NEW

Hi,

I am running into a very odd bug on Safari 14 (Mac OS). Our code base is pretty complex but I have tried to remove any unrelated code: https://warehouse-development.myshopify.com/

If you focus the Search input field, a list of links will appear. I have added a simple onclick="alert('test')" on each of those links. If your trackpad is configured to tap to click, then if you focus the field and try to tap a first time, then click event is NOT triggered. You need to tap a second time on it to actually trigger the event.

On the other hand, clicking focusing out the field and refocusing it, if you attempt a real click, then it is triggered the first time.

Aren't tap to click and click supposed to behave the same way?

Thanks!

[Tim Horton]

IIRC one of the common causes of this is that tap-to-click's mousedown + mouseup come with essentially zero time between them, which sometimes confuses code that doesn't expect this. (No idea if that's what's happening in this case, but it is something to keep in mind).

Thanks for the reply Tim! I do not really understand though. Does this mean that attaching a listener on click event is incorrect? I have no issue on other browsers, the click being properly captured. What is the proper usage then? Is there some documentation explaining how tap to click should be properly handled?

[Tim Horton]

(In reply to mic.gallego from comment #2)
> Thanks for the reply Tim! I do not really understand though. Does this mean
> that attaching a listener on click event is incorrect? I have no issue on
> other browsers, the click being properly captured. What is the proper usage
> then? Is there some documentation explaining how tap to click should be
> properly handled?

No, a listener on `click` is right, and should work!

[Tim Horton]

FWIW, on your test page, I can't reproduce the issue as described (even the first tap).

On Safari 14.0.1 ? I have all our users being impacted so it is odd you cannot reproduce it. Are you properly doing a click on the input field and then click on "Theme killer" link for instance? I am sorry for the suboptimal reduced test case and I will try to set up a better one once I have a bit of time.

(In reply to Tim Horton from comment #4)
> FWIW, on your test page, I can't reproduce the issue as described (even the
> first tap).

Apparently the issue happens only when the input is focused. When I click on a link here, the input looses the focus, but the click is captured. Subsequent clicks are all properly captured.

[Radar WebKit Bug Importer]

<rdar://problem/72373776>

Hi,

This issue is still presents and I am completely unable to fix it. I have therefore sent a minimal code where the issue can be reproduced: https://jsbin.com/bifidalemo/edit?html,css,output

On all browsers except Safari: focus the field, click on the link => it will show the alert
On Safari: focus the field, tap to touch on the link => it will not show the alert (you need to tap a second time for the click to be registered). Doing a second click works, but not the first one.

What is going on here? It seems very strange that such a basic thing fails in Safari :/.

I am using Safari 14.0.2 (no extension installed beside 1Password), it is reproducible in a same way in my computer but also on all the computers from my co-workers.

[Tim Horton]

Hmm, can't reproduce even with the minimal case, on multiple computers. (And yes, I am tap-to-clicking, and using Safari 14.0.2 on macOS 11.1. Have not seen the alert fail to show up in any configuration. Let me see if I can find someone else to try :)

(In reply to Tim Horton from comment #9)
> Hmm, can't reproduce even with the minimal case, on multiple computers. (And
> yes, I am tap-to-clicking, and using Safari 14.0.2 on macOS 11.1. Have not
> seen the alert fail to show up in any configuration. Let me see if I can
> find someone else to try :)

Extremely strange. May it be due to different trackpad settings?

[Philip]

Hi

I am having this issue, which I have reported to Maestroo tech support. I am using a Mac running OS 11.1 and Safari 14.0.2. Our website is at supernovastudio.durban

I will try to post a video here to illustrate the issue.

Regards

Philip

[Philip]

Created attachment 420272 [details]
Video of issue

I tried searching again, and found that if I click on some of the results other than the first please see video attached it sometimes works. Its inconsistent though in terms of behaviour as you will see some of the results are "clickable" and some are not, I don't understand why it will not work consistently. I am using the latest Safari browser version 14.0.2.

(In reply to Tim Horton from comment #9)
> Hmm, can't reproduce even with the minimal case, on multiple computers. (And
> yes, I am tap-to-clicking, and using Safari 14.0.2 on macOS 11.1. Have not
> seen the alert fail to show up in any configuration. Let me see if I can
> find someone else to try :)


Hi,

Has this issue got some attention? The issue is still reproducible on Safari 15, it is pretty annoying issue and still could not find any way to solve it. Still only Safari is impacted.

Can I please have someone investigate this issue? Since Safari 15 this is now constantly reproducible when the touch pad is configured with "tap to click". I have spent countless of hours and the issue is definitely coming from Safari here.

[Tim Horton]

Sadly I still cannot reproduce in Safari 15 (with the test page @ https://jsbin.com/bifidalemo/edit?html,css,output), so cannot debug this. I will ask other folks to try again, but we didn't have any luck last time.

(In reply to Tim Horton from comment #15)
> Sadly I still cannot reproduce in Safari 15 (with the test page @
> https://jsbin.com/bifidalemo/edit?html,css,output), so cannot debug this. I
> will ask other folks to try again, but we didn't have any luck last time.

This is odd, because it is now reproducible by nearly everybody. You can try our demo store here: https://warehouse-theme-metal.myshopify.com/

To reproduce the issue enter anything in the search bar, wait for the search results to show up and tap to click on one link. On Safari, instead of going to the link, it will simply disappear.

Make sure that you configure your trackpad with the "Tap to click" and that you do not do a hard click. You must just tap. If you do a "deeper" click (that triggers the force touch) it works.

[Tim Horton]

1) I still can't repro on the reduction page (I understand how to tap-to-click, I promise :D)
2) But I can on https://warehouse-theme-metal.myshopify.com/
3) But it's broken both for click and tap-to-click, for me. Might be a click speed thing, though, because:

The *problem* is that you're hiding the search results on the `focusout` event, and depending on the timing relative to the click event (which as I mentioned in comment 1 is one of the big things that is "weird" about tap-to-click) to ensure that the link is still there to follow.

Disabling the `focusout` handler fixes your site (obviously you'd want a more gentle workaround). I'd recommend that for a short term fix.

Longer term we probably want to peek at how this works in other browsers; maybe the event order is different, or they stash the target aside, or something? Just speculation.

(In reply to Tim Horton from comment #17)
> 1) I still can't repro on the reduction page (I understand how to
> tap-to-click, I promise :D)
> 2) But I can on https://warehouse-theme-metal.myshopify.com/
> 3) But it's broken both for click and tap-to-click, for me. Might be a click
> speed thing, though, because:
> 
> The *problem* is that you're hiding the search results on the `focusout`
> event, and depending on the timing relative to the click event (which as I
> mentioned in comment 1 is one of the big things that is "weird" about
> tap-to-click) to ensure that the link is still there to follow.
> 
> Disabling the `focusout` handler fixes your site (obviously you'd want a
> more gentle workaround). I'd recommend that for a short term fix.
> 
> Longer term we probably want to peek at how this works in other browsers;
> maybe the event order is different, or they stash the target aside, or
> something? Just speculation.

Sorry Tim, I have no doubt you know how to tap to click, sorry if this was perceived as rude. This issue just drives me nuts :(.

I am indeed using a focusout. However the issue is that even if I execute the focusout content something like 2 or 3 seconds after, the tap to click still does not work (which is the whole issue).

The issue is really as if the tap to click to click is completely ignored and pass through. 

I definitely want to find the root cause of this and be able to provide a sane fix for all Safari users (other browsers are not impacted), so if I can do anything that would help let me know. Would duplicating the store with a delay on the focusout listener help you to further debug it?

Thanks a lot :)

[Tim Horton]

(In reply to mic.gallego from comment #18)
> (In reply to Tim Horton from comment #17)
> > 1) I still can't repro on the reduction page (I understand how to
> > tap-to-click, I promise :D)
> > 2) But I can on https://warehouse-theme-metal.myshopify.com/
> > 3) But it's broken both for click and tap-to-click, for me. Might be a click
> > speed thing, though, because:
> > 
> > The *problem* is that you're hiding the search results on the `focusout`
> > event, and depending on the timing relative to the click event (which as I
> > mentioned in comment 1 is one of the big things that is "weird" about
> > tap-to-click) to ensure that the link is still there to follow.
> > 
> > Disabling the `focusout` handler fixes your site (obviously you'd want a
> > more gentle workaround). I'd recommend that for a short term fix.
> > 
> > Longer term we probably want to peek at how this works in other browsers;
> > maybe the event order is different, or they stash the target aside, or
> > something? Just speculation.
> 
> Sorry Tim, I have no doubt you know how to tap to click, sorry if this was
> perceived as rude. This issue just drives me nuts :(.

Heh, it's ok :)

> I am indeed using a focusout. However the issue is that even if I execute
> the focusout content something like 2 or 3 seconds after, the tap to click
> still does not work (which is the whole issue).

Iiiiinteresting...

> The issue is really as if the tap to click to click is completely ignored
> and pass through. 
> 
> I definitely want to find the root cause of this and be able to provide a
> sane fix for all Safari users (other browsers are not impacted), so if I can
> do anything that would help let me know. Would duplicating the store with a
> delay on the focusout listener help you to further debug it?

I'm not sure that will do the trick! Because if I disable the focusout listener in the Web Inspector, I don't have any trouble, just like I don't have any trouble on the jsbin...

Hi Tim,

I have prepared this version for you: https://gymaw0du6umhtc9w-6530957363.shopifypreview.com

I have removed the focus out listener completely. If you enter a search, then tap to click, the first time it is completely ignored, the link is not followed at all. You have to do a second tap to click to follow the link.

Every other browser properly follows the link on the first tap. So the issue does not seem to be coming from the focus out here :(.

[Tim Horton]

(In reply to mic.gallego from comment #20)
> Hi Tim,
> 
> I have prepared this version for you:
> https://gymaw0du6umhtc9w-6530957363.shopifypreview.com
> 
> I have removed the focus out listener completely. If you enter a search,
> then tap to click, the first time it is completely ignored, the link is not
> followed at all. You have to do a second tap to click to follow the link.
> 
> Every other browser properly follows the link on the first tap. So the issue
> does not seem to be coming from the focus out here :(.

Oh dear, this version works perfectly for me (both with click and tap-to-click), like the jsbin.

Exactly what OS version and hardware (external trackpad? laptop trackpad? something else?) are you using? There has to be some repro trick that we just haven't nailed down yet!

(In reply to Tim Horton from comment #21)
> (In reply to mic.gallego from comment #20)
> > Hi Tim,
> > 
> > I have prepared this version for you:
> > https://gymaw0du6umhtc9w-6530957363.shopifypreview.com
> > 
> > I have removed the focus out listener completely. If you enter a search,
> > then tap to click, the first time it is completely ignored, the link is not
> > followed at all. You have to do a second tap to click to follow the link.
> > 
> > Every other browser properly follows the link on the first tap. So the issue
> > does not seem to be coming from the focus out here :(.
> 
> Oh dear, this version works perfectly for me (both with click and
> tap-to-click), like the jsbin.
> 
> Exactly what OS version and hardware (external trackpad? laptop trackpad?
> something else?) are you using? There has to be some repro trick that we
> just haven't nailed down yet!

This is very strange, all our customers and myself are able to reproduce it :(. I am on Big Sur (but I am able to reproduce it since several versions). The latest version of Safari.

If that may help, here are my trackpad settings: https://www.dropbox.com/s/ozh51qrjhx4dgvy/Capture%20d%E2%80%99%C3%A9cran%202021-10-19%20%C3%A0%2019.09.28.png?dl=0

Hi Tim,

A follow up on this: it apparently also happens on iPad: https://warehouse-theme-metal.myshopify.com/

If you do a search and then tap to click the search closes without following the link. Adding a delay on the focusout doesn't solve this issue.

I think there is definitely a big issue on how Safari handles tap to touch internally under some circumstances, I would really appreciate if this could be thoroughly investigated :).

[Tim Horton]

(In reply to mic.gallego from comment #23)
> Hi Tim,
> 
> A follow up on this: it apparently also happens on iPad:
> https://warehouse-theme-metal.myshopify.com/
> 
> If you do a search and then tap to click the search closes without following
> the link.

I can reproduce this...

> Adding a delay on the focusout doesn't solve this issue.

...but not this. I disabled the focusout handlers in the web inspector and the page works perfectly fine on iPad, as expected. Can you put a version somewhere with your delay (that doesn't work), instead, so I can play with that? (also, I see three focusout handlers, but only the one on div.header__search-bar-wrapper.is-visible.is-fixed seems to matter).

Tap-to-click on macOS and tap on iOS share literally no code, but *do* share the critical behavioral difference that I mentioned at the beginning (that the mousedown/up happens instantly, as opposed to over a short time with a traditional trackpad click) so the fact that the issue reproduces in both cases is surprising if it is a WebKit issue...

> I think there is definitely a big issue on how Safari handles tap to touch
> internally under some circumstances, I would really appreciate if this could
> be thoroughly investigated :).

I continue to expect those circumstances are "when the site removes the thing being tapped on before the gesture is complete", but we shall see! :D

Sure. Here you are: https://8rd089n0ktc7hivk-6530957363.shopifypreview.com
This one still keeps the focusout listener, however it's execution is wrapped in in setTimeout with a delay of 20ms. The issue is still reproducible for me on both osX and iPad.

> I continue to expect those circumstances are "when the site removes the thing being tapped on before the gesture is complete", but we shall see! :D

I would expect that all browsers would have the same behavior for dealing with event listeners ;). Only Safari behaves differently here.

[Tim Horton]

(In reply to mic.gallego from comment #25)
> Sure. Here you are: https://8rd089n0ktc7hivk-6530957363.shopifypreview.com
> This one still keeps the focusout listener, however it's execution is
> wrapped in in setTimeout with a delay of 20ms. The issue is still
> reproducible for me on both osX and iPad.

Oh dear, this site works flawlessly for me on both platforms. I feel like we're going in circles :D

> > I continue to expect those circumstances are "when the site removes the thing being tapped on before the gesture is complete", but we shall see! :D
> 
> I would expect that all browsers would have the same behavior for dealing
> with event listeners ;). Only Safari behaves differently here.

Sure, I'm totally not saying there's not something to change, but we can't even talk about that till we're seeing the same thing! (Also would require a bit more digging into the FF/Chrome behavior).

> Oh dear, this site works flawlessly for me on both platforms. I feel like
> we're going in circles :D

Yaaaaahh... Why you don't have similar outputs as myself and our users is beyond my head haha. I just tried to lower the setTimeout to 1ms instead. Does it still work on your end?

[Tim Horton]

(In reply to mic.gallego from comment #27)
> > Oh dear, this site works flawlessly for me on both platforms. I feel like
> > we're going in circles :D
> 
> Yaaaaahh... Why you don't have similar outputs as myself and our users is
> beyond my head haha. I just tried to lower the setTimeout to 1ms instead.
> Does it still work on your end?

Yes, it's still fine :( (if you crank it to 200ms, does it work on your end?)

> Yes, it's still fine :( (if you crank it to 200ms, does it work on your end?)

I set it to a high value (2000ms). What happens here is that the first tap is basically completely ignored, as if it does not go through (and after 2s, the focusout listener executes and it gets hidden). However if between those 2s I tap a second time before it disappears, then the link is followed. But the first tap, never :/

[Eduardo Pimentel]

Hi Tim,

I am also experiencing this issue here in our store.

My Mac is also configured to tap to click and the click goes through and is being ignored. Any other browser (Chrome, Firefox) works perfectly in the same configuration.

I am on Safari Version 15.1 (17612.2.9.1.20), and MacOS 12.1.0

It seems this issue is definitely not isolated and happens to most of us. Could this be checked further? Most likely someone at Apple can reproduce this :)

Any movement on this? Sorry to be a mess on this, but this is a huge issue that impacts us daily. Are there any plan to align Safari behavior with other browsers, or should I consider as an inconsistency that will never be fixed?

[kevin]

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

[Karl Dubost]

I added a comment on the GitHub issue.

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 
```


This is indeed happening.

[Karl Dubost]

Probably a link to the GitHub issue would help too :) 
https://github.com/facebook/react/issues/20787#issuecomment-1827324891

[Alexey Proskuryakov]

*** Bug 253803 has been marked as a duplicate of this bug. ***