reactjseventsevent-handlingdom-eventsonblur

Using onBlur after upgrade to React 17

I have a div as below.

<div
 id={'editor1'}
 tabIndex={-1} 
 onBlur={this._blurHandler}
>

I am noticing that after upgrading to React version 17.0.1 (from 16.13.1), the this._blurHandler is not getting invoked.

I did read up on the breaking changes - https://reactjs.org/blog/2020/08/10/react-v17-rc.html#other-breaking-changes and see that "onBlur events have switched to using the native focusin and focusout" instead of focus.

While I am on react 17, is there a way I can get back the original behavior that would invoke this._blurHandler upon blur?

Solution

  • The main difference between onBlur and focusout (native events not React) is that focusout does propegate while onBlur doesn't. So try adding e.stopPropegation() to your React onBlur / onFocus Events.