Material-ui: Tab panel disappears when selecting checkbox

[nikhilshagri]

I have a tabs component with multiple tabs inside it, and I have a checkbox component inside one of the tabs' content panels. Whenever I select/deselect the checkbox, all the content of that tab panel just disappears.
The same happens when I use a plain HTML checkbox, and also when I use the material-ui 'Toggle' component'. I haven't tested for other components yet.

[puranjayjain]

@cynicaldevil do you have a demo or can I look into your source code?

[nikhilshagri]

@puranjayjain Where can I post a demo?

[puranjayjain]

@cynicaldevil in a new github repo.

[brunor]

I've seen this happen as well. Calling event.stopPropagation() from inside the checkbox onCheck handler fixed the issue for me.

[nikhilshagri]

@brunor It works!!
Thanks a lot, I had been struggling with this issue for quite a while now. Any idea why does this happen, though?

[izziaraffaele]

I have the same issue with TextField component. If it's within the Tab, the onChange event on the TextField component will propagate till the Tabs component

[ozluy]

I guess we must call event.stopPropagation() in any event inside the Tabs' content.