Bug: onClick event bubbling to document click which is added after re-render

[vincaslt]

React version: 17.0.1

Steps To Reproduce

I have a hook, that binds a click event listener on document after some state changes, e.g.:

const [isOpen, setOpen] = useState(false);

useEffect(() => {
  if (!isOpen) {
    return;
  }

  const handleClick = () => {
    console.log('clicked');
  };

  document.addEventListener('click', handleClick);

  return () => {
    document.removeEventListener('click', handleClick);
  };
}, [isOpen]);

return (
  <button
    type="button"
    onClick={() => {
      setOpen(true);
    }}
  >
    Button
  </button>
)

The current behavior

Clicking the button outputs clicked in the console for me.

The expected behavior

This did not happen in the react versions prior to 17, so I assume it has to do something with how events are now bubbling to document events. If I add e.stopPropagation() in my button click handler, the document click event listener is not triggered.

[eps1lon]

It doesn't look like this bug report has enough info for one of us to reproduce it. With the code provided I don't see a difference between 16 and 17.

Though it does look similar to #20074. Maybe this is the same issue?

Please provide a CodeSandbox (https://material-ui.com/r/issue-template), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[vincaslt]

Yeah you're right. I use react-transition-group in the component too, which is what the issue is related to it seems, because after removing the usage, everything works as expected.