The gray overlay when tap the react root container

[amikitevich]

Do you want to request a feature or report a bug?
bug

What is the current behavior?

Since React@16.5 seems that root element has onclick event handler with noop function.
In ios Safari/Chrome browsers html element has gray overlay when tap on it.

The current behavior is that the whole root is blinking when we tap on it.

The simple example to reproduce:
https://codesandbox.io/s/wyo8rlj1zk
The issue is reproducing only in fullscreen mode https://wyo8rlj1zk.codesandbox.io/
(root container is steel blue)

I suppose changes came from here:
#11927
https://github.com/facebook/react/pull/11927/files

and the issue can be related with:
mui/material-ui#11154
#12717

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16.5
ios 11.3/12 Safari/Chrome

[philipp-spiess]

@amikitevich Thanks for reporting this. I agree that we shouldn't add onclick handler to React roots. Seems that we did not spot this regression in manual tests because of Safari hiding tap highlights when an element is bigger than the viewport 🤔. Check out #13778.

[amikitevich]

@philipp-spiess very appreciated for your explanation, help and the fix. Thank you! 👍