[bug?] inner form cause outter form submit

[xialvjun]

example: https://codesandbox.io/s/8plqn8mwl

I don't know if it's a bug or a feature. If code like this:

function Portal({ children }) {
  return ReactDOM.createPortal(children, document.body);
}

<form id="outter_form" onSubmit={e => xxx}>
  <Portal>
    <form id="inner_form" onSubmit={e => xxx}>
      <button type="submit">submit</button>
    </form>
  </Portal>
</form>

// then the inner_from onSubmit will cause the outter form submit...
// I have to add `if (e.target !== e.currentTarget) return;` in outter form's onSubmit to prevent it.

If it's a feature, feel free to close this issue. But I still hope you document it in reactjs.org

[muqg]

React's Portals documentation does state that events propagate to parents as if the children are still part of the main component tree, even though they pop out of the html one. You can avoid this by calling e.stopPropagation therefore.

[xialvjun]

Oh, yeah, I remembered e.preventDefault(), but forgot e.stopProgation()