jQuery erroneously calls pointerleave handlers when entering a descendent input textbox in Chrome

[lpd-au]

Description

1. Attach a pointerleave handler to an element with an input descendant textbox using jQuery.
2. Attach a pointerleave handler to the same element using native javascript.
3. Starting outside the container element, move your mouse into it and over the textbox.

Expected behaviour: no events will fire.
Actual behaviour: in Chrome, the jQuery event handler is called but not the native event handler. Expected behaviour occurs in Firefox (with feature flag) and Edge.

Just to emphasize, using otherwise identical test code, I can only reproduce this in one browser when the event handlers are added using .on and not .addEventListener. Substituting those two functions was the fix for my web app.

Tested on a 1.25x scaled, touchscreen Windows 10 laptop in Chrome 56 (beta), Firefox 52 (dev edn), Edge 14.

Link to test case

jQuery 1.12.4: https://jsfiddle.net/od2f7wnm/ (fail)
jQuery 1.x tip: https://jsfiddle.net/od2f7wnm/1/ (fail)
jQuery 3.1.1: https://jsfiddle.net/od2f7wnm/2/ (fail)
jQuery 3.x tip: https://jsfiddle.net/od2f7wnm/3/ (fail)
Native JS: https://jsfiddle.net/3ugj8nor/ (pass)

[dmethvin]

Whoa, nice one!

In order to support delegated events on mouse or pointer enter/leave, jQuery uses the corresponding over/out event and then looks at the event.relatedTarget to determine whether the pointer is actually entering or leaving the parent element. There seems to be a bug in Chrome's pointerout event where event.relatedTarget is reporting a shadow DOM element inside the input's shadow DOM called #inner-editor where it should be reporting the input. When jQuery can't find that element in the current document it thinks the pointer must have left the building and fires the pointerleave event.

You can see the problem in action if you turn on Settings, "Show user agent shadow DOM" and inspect the input. Screen shot attached.

[dmethvin]

@RByers does that look like a bug to you?

[RByers]

Whoa yes - that's a Chrome bug. Thanks and sorry for the trouble! We'll get it fixed ASAP (likely Chrome 57) - I'm guessing it won't be too hard.

[markelog]

Chrome patch is in, sounds like we good here