Bug: React 17.0.0-rc.0 doesn't trigger onFocus/onBlur on element.dispatchEvent

[diegohaz]

React version: 17.0.0-rc.0

Steps To Reproduce

1. Programmatically dispatch focus/blur events using element.dispatchEvent
2. Check if onFocus/onBlur props are triggered

Link to code example: https://codesandbox.io/s/react-1700-rc0-dispatching-focusblur-events-pt6ih

The current behavior

onFocus/onBlur props aren't triggered.

The expected behavior

onFocus/onBlur props to be triggered just like in React 16.13.1

[gaearon]

This is expected: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#aligning-with-browsers

React onFocus and onBlur events have switched to using the native focusin and focusout events under the hood, which more closely match React’s existing behavior and sometimes provide extra information.

This works:

    ref.current.dispatchEvent(
      new Event("focusin", {
        bubbles: true
      })
    );
    ref.current.dispatchEvent(
      new Event("focusout", {
        bubbles: true
      })
    );

https://codesandbox.io/s/react-1700-rc0-dispatching-focusblur-events-forked-kbbul

Note though that you probably want to call .focus() instead of emulating events because the browser fires them in a specific order and it's always a risk to try to replicate it yourself because it might not match what the browser does.