[Webkit-unassigned] [Bug 179990] New: Phantom focus/blur events fire on clicking between text input fields when listening with addEventListener

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=179990

            Bug ID: 179990
           Summary: Phantom focus/blur events fire on clicking between
                    text input fields when listening with addEventListener
           Product: WebKit
           Version: Safari 11
          Hardware: Macintosh
                OS: macOS 10.13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Event Handling
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: rez at iinet.net.au

With two or more text inputs on a form, switching focus by click from one to another sometimes causes an extra focus/blur to fire.

Steps to reproduce

Start with a form with two or more text inputs and watch focus/blur events.
Demo: https://codepen.io/cliener/pen/ooGpwW

1. Click on one of the text inputs (#1)
2. Click on another text input (#2)
3. Repeat the above until extra focus/blur events show.

The phantom events only seem to fire on the second and subsequent text inputs.


Expected behaviour

Each clicked focus shift should fire single blur/focus events.
Element #1 blur
Element #2 focus
Element #2 click


Actual behaviour

Some clicked focus shifts fire secondary blur/focus events with the net effect of:
Element #1 blur
Element #2 focus
Element #1 blur
Element #2 focus
Element #2 click


Additional notes

Monitoring the events in the console with monitorEvents() does not show the phantom events. The extra events only appear to be visible when listening to the DOM focus/blur events with addEventListener.

Disabling "Look up & data detectors" (System Preferences: Trackpad: Point & Click: Look up & data detectors) fixes the bug.

Tested and recreated in:
- Safari Version 11.0.1 (13604.3.5) on MacOS 10.13.1 (17B48)
- Safari Technology Preview Release 44 (Safari 11.1, WebKit 13605.1.13.2)


Impact of this bug

Custom form elements which depend on focus/blur can get stuck in a loop as demonstrated in React Datepicker https://github.com/Hacker0x01/react-datepicker/issues/1077
This bug has also been noted in React where we're trying to find a workaround https://github.com/facebook/react/issues/10871

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20171124/b26c7cea/attachment.html>