0

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

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

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.