Provides a workaround for phantom blur/focus events for HTML inputs in Safari MacOS. The bug this code fixes is described in a WebKit bug/Radar and React bug.
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. Untreated form elements which depend on focus/blur can get stuck in a loop as demonstrated in React Datepicker.
This package throttles all blur/focus events fired within 50ms of the original.
The package can be installed via NPM:
npm install input-fixer --save
The package is available as vanilla JS as above and the following:
From tests conducted, the bug effects Safari MacOS 10.x and 11.x.
Start with a form with two or more text inputs and watch focus/blur events. (Demo)
- Click on one of the text inputs (#1)
- Click on another text input (#2)
- Repeat the above until extra focus/blur events show.
The phantom events only seem to fire on the second and subsequent text inputs.
Each clicked focus shift should fire single blur/focus events.
- Element #1 blur
- Element #2 focus
- Element #2 click
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
Monitoring the events in the console with monitorEvents() (see Google's monitorEvents reference) does not show the phantom events. The extra events only appear to be visible when listening to the DOM focus/blur events with addEventListener.