React's blur may not have relatedTarget in IE 9-11 where it is supported.

ReactBrowserEventEmitter has some handling for onBlur and onFocus.

See: https://github.com/facebook/react/blob/94a3b0f8a304202bb7c4cc32286e404ac3cc9464/src/browser/ReactBrowserEventEmitter.js#L262-L293

React will first check if it can trap focus with a capturing event using addEventListener. If it can’t and the browser supports focusin then it will use focusin.

However there is a problem with this pattern. Internet Explorer implements relatedTarget on focusin and focusout but it does not implement it in focus and blur. As of IE 9, IE supports addEventListener and trapping capturing events.

This means that IE 8 and before React will have relatedTarget on onFocus and onBlur handlers. But in IE 9-11 relatedTarget will be null in React’s onFocus and onBlur handlers even though IE would support it if focusin and focusout had been used.

[dantman]

#2011 is related, but this is separate. Since that’s about what can be done when a browser has failed to implement relatedTarget at all. While this is about React not exposing relatedTarget when it is implemented in a browser.

The fix for this bug is probably the simple change of using focusin wherever it is supported instead of only using it when addEventListener isn’t supported. ie: Flip the order we if ( ) {} else if ( ) {}.

I make use of relatedTarget because I’ve gone the extra effort to make my navigation respond to the keyboard, based on WAI-ARIA’s recommendations on how doing this with the keyboard should function. relatedTarget is relevant to a form of “close on blur” functionality. When navigating with the keyboard menu items are given focus one at a time and when focus leaves the menu (user has tabbed out, clicked somewhere else, or taken any other action that has moved focus out of the menu) the menu closes. Because any form of delegated blur event (which is required when you are trying to tell if focus has left a region rather than if a single form field is no longer focused) fires on every single blur event within a region, relatedTarget is necessary to tell the difference between the user moving from one menu item to another and focus leaving the menu. As a bonus, because I focus the menu container itself when a user has normally opened the menu by a click, I get a free way to automatically close the menu when the user clicks somewhere else. This type of menu closing is actually a lot less of a hack than other methods, like trapping clicks on the body, covering the page in a transparent overlay, etc.

[tvararu]

Same issue when building an autocomplete and having to make heads/tails whether a fired onBlur event should lead to closing the menu or not. onFocusOut works fine in React but it leads to warnings being fired.