Why does Checkbox fires Tabs onChange event in material-ui?

Question

I'm using Material UI for React.

I have a checkbox inside of a tab:

const Layout = () => (
<Tabs value='a' onChange={e => console.log(e)}>
  <Tab label='a' value='a'>
    <Checkbox />
  </Tab>
</Tabs>
);

When I click on the checkbox Tabs' onChange event gets fired. Is it intentional behavior? Is there a way to avoid this?

Here is an example: https://github.com/evgeny-t/material-ui-webpack-example/compare/master...evgeny-t:checkbox-inside-tabs?expand=1

Do you have any jsbin or codepen with that? It does not sounds as a normal behavior. — Avraam Mavridis, Sep 14 '16 at 14:56
@AvraamMavridis I've updated the question. The branch contains some irrelevant changes though. — Evgeny Timoshenko, Sep 14 '16 at 15:11

score 0 · Answer 1 · edited May 23 '17 at 12:15

It doesn't seem to be intentional behaviour. I was able to check and uncheck the Checkbox without firing the onChange of the Tab with the following code:

handleChangeCapture(e) {
    e.stopPropagation();
}
checkUncheck(e) {
    console.log('change')
    this.setState({
        isChecked: !this.state.isChecked
    });
}

render() {
    return (
        <MuiThemeProvider muiTheme={muiTheme}>
            <Tabs value='a' onChange={ e => console.log(e) }>
                <Tab label='a' value='a'>
                    <div onChangeCapture={this.handleChangeCapture}>
                        <Checkbox onClick={this.checkUncheck} checked={this.state.isChecked}/>
                    </div>
                </Tab>
            </Tabs>
        </MuiThemeProvider>
    );
}

Of course, I added isChecked: false to the state and put in the constructor this.checkUncheck = this.checkUncheck.bind(this);. Using onChangeCapture on a parent div and stopping the propagation of the event (with stopPropagation) is basically what I did. This answer explains how onClickCapture works. I didn't explicitly find onChangeCapture in the documentation but it seems to work similarly.

Why does Checkbox fires Tabs onChange event in material-ui?

1 Answers1