React version: 18.2.0
- Run the app (
npm start
), it will display a page with a button - Open the Javascript console (browser's dev tools) to see some logs that will appear (Note that you should see the React warning about using the deprecated ReactDOM.render function)
- Click on the button, a popup shows
- Click anywhere on the window, it will close the popup
- Change the value of the
ENABLE_NEW_REACT_18_CREATEROOT
in filesrc/index.tsx
totrue
(The page should reload) - Click the button, ... and nothing happens (well graphically at least, because in the console, we can see that the popup is closed right after opening)
A quick fix is to uncomment the line 32
(event.stopPropagation()
) to make it work again.
It looks like, with the new ReactDOM.createRoot function, that the popup rendering is done before the processing of the initial button's click event is even finished...
Alright, we are messing up with window event listener there. But that's because we want the popup to close on any click on the window. Maybe there is a better way for doing that properly?