Bug 218923 - iOS: click event doesn't get dispatched when there is a click event listener on ShadowRoot
Summary: iOS: click event doesn't get dispatched when there is a click event listener ...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: UI Events (show other bugs)
Version: Safari 14
Hardware: iPhone / iPad iOS 13
: P2 Blocker
Assignee: Ryosuke Niwa
URL: https://jsfiddle.net/to2mgsy0/
Keywords: BrowserCompat, HTML5, InRadar
Depends on:
Blocks: 148695
  Show dependency treegraph
 
Reported: 2020-11-13 15:11 PST by Lionel Seguin
Modified: 2022-07-03 16:37 PDT (History)
5 users (show)

See Also:


Attachments
File to launch on iOS nothing will happen by clicking on "CLICK ME" (902 bytes, text/html)
2020-11-13 15:11 PST, Lionel Seguin
no flags Details
WIP (1.07 KB, patch)
2022-07-03 02:13 PDT, Ryosuke Niwa
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Lionel Seguin 2020-11-13 15:11:45 PST
Created attachment 414097 [details]
File to launch on iOS nothing will happen by clicking on "CLICK ME"

This issue is happening only on iOS.

First you have to create the following DOM (the file attached is doing it):

<my-custom-element onclick="alert('CUSTOM BUTTON CLICKED')">
  #shadowRoot
     <span>
       "button is:"
       <slot></slot>
     </span>
  "Some Text"
</my-custom-element>

when the dom is created you can add a listener to the shadowRoot like this:

```javascript
document.querySelector('my-custom-element')
  .shadowRoot
  .addEventListener('click', () => { alert('CLICK EVENT FIRED'); });
```

now you can press the "span" and you will see no event is fired. There is no alert at all displayed.

The issue is related to the listener we have on the shadowRoot. If we don't have it the first listener is working well.


Another strange behaviour is if you had an other listener on the "span" like this:

```javascript
document.querySelector('my-custom-element')
  .shadowRoot
  .querySelector('span')
  .addEventListener('click', () => { alert('SPAN CLICKED'); });
```

Now if you press the button the probleme is fixed the 3 handlers are well called as expected.
Comment 1 Lionel Seguin 2020-11-14 05:33:25 PST
The biggest impact of this issue is when a third party script is capturing events coming from a shadow root, it impacts the initial behaviour of the custom component.
Comment 2 Lionel Seguin 2020-11-14 05:49:51 PST
Another information.

Attaching any of those events to the shadowRoot will change the initial component behaviour:

- mouseover
- click
- mousedown
- mouseup
- mousemove
Comment 3 Smoley 2020-11-16 18:33:07 PST
Thanks for filing. I can reproduce this with the provided test case on iOS 13.6.1 and the current iOS 14.3 beta.
Comment 4 Radar WebKit Bug Importer 2020-11-16 18:33:16 PST
<rdar://problem/71468598>
Comment 5 Ryosuke Niwa 2022-07-03 02:11:52 PDT
This was a bizarre bug! It all comes down to WebPage::commitPotentialTap failing to dispatch click event because ShadowRoot doesn't have a renderer.
Comment 6 Ryosuke Niwa 2022-07-03 02:13:32 PDT
Created attachment 460637 [details]
WIP
Comment 7 Ryosuke Niwa 2022-07-03 13:36:25 PDT
Pull request: https://github.com/WebKit/WebKit/pull/2043
Comment 8 EWS 2022-07-03 16:37:21 PDT
Committed 252107@main (b01e40564c21): <https://commits.webkit.org/252107@main>

Reviewed commits have been landed. Closing PR #2043 and removing active labels.