Nested buttons result in weird side effects

[Janpot]

First of all, I'm well aware this is invalid markup and I don't expect this use case to actually work. But running the following invalid markup in next.js results in unrelated divs getting duplicated. Reporting because it could be indicative of other bugs. Feel free to close otherwise.

// ./pages/index.js
import * as React from 'react';
import { Button } from '@material-ui/core';

function ButtonInButton () {
  return (
    <Button>
      <div>
        button
        <Button />
      </div>
    </Button>
  );
}

export default function Dashboard () {
  return (
    <div>
      <ButtonInButton />
      <ButtonInButton />
      <div>foo</div>
    </div>
  );
}

• The issue is present in the latest release. both in latest 4 and 5
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The div containing "foo" is duplicated

Expected Behavior 🤔

The div containing "foo" is not duplicated. Invalid markup shouldn't have strange side effects in unrelated places in the DOM tree.

Steps to Reproduce 🕹

Steps:

1. Put the above snippet as a page in the nextjs example (or clone https://github.com/Janpot/nextjs-button-in-button-sideeffects)
2. Run yarn dev
3. Open http://localhost:3000/
4. Observe

Several changes "fixes" the problem (always do a hard page refresh after these changes):

• remove the nested div in the outer Button (but leave the inner Button in place)
• remove the nested Button
• remove one of the ButtonInButton instances

Context 🔦

As stated above, I don't expect this to work, I just expect it to not have weird side-effects.

Your Environment 🌎

Tech	Version
Material-UI	5.0.0-alpha.17
React	17.0.1
Browser	chrome

[oliviertassinari]

@Janpot Does React display an error?

[Janpot]

Yes, forgot to mention that, React throws errors:

react-dom.development.js?61bb:67 Warning: Expected server HTML to contain a matching <button> in <div>.
react-dom.development.js?61bb:67 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

Which is as expected.

👍 If you consider that sufficient and don't want to investigate deeper on this side-effect, then this issue can be closed.

[oliviertassinari]

It could be an issue with React. I think that the opportunity cost is too high. Even if we solve it, developers would still need to handle this warning. Thanks for raising.

[Janpot]

It could be an issue with React.

@oliviertassinari omg, you're totally right, I didn't even consider this not being a material-ui issue. The following shows the same behavior:

function ButtonInButton () {
  return (
    <button>
      <div>
        button
        <button />
      </div>
    </button>
  );
}