Material UI - Expansion panel with checkbox

I am using Material-UI for UI design. I am using an expansion panel with checkbox integrated into it.

Please find below code,

<ExpansionPanel expanded={expanded === item.description} onChange={this.handleChange(item.description)}>
                            <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
                                <Grid item xs={1}>
                                    <Checkbox
                                        value="checkedB"
                                        color="primary"
                                    />
                                </Grid>
                                <Grid item xs={2}>
                                    <Typography className={classes.heading}>{item.description}</Typography>
                                </Grid>
                                <Typography className={classes.desc}>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
                                    sit amet blandit leo lobortis eget.
                                </Typography>
                            </ExpansionPanelSummary>
                            <ExpansionPanelDetails>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
                                sit amet blandit leo lobortis eget.
                            </ExpansionPanelDetails>
                        </ExpansionPanel>

But I am facing one issue, when I check or uncheck the checkbox, expansion panel expands or collapse. I want to avoid any action on expansion panel due to the checkbox. How can I achieve that?

Thanks in advance.

1 answer

  • answered 2018-10-11 20:56 Nikhil

    Not the direct answer for your question. But by using the following code you can open/close the expansion panel only via the icon

    <ExpansionPanelSummary expandIcon={<ExpandMoreIcon onClick={() => {
                   this.setState({
                     expansionPanelOpen: !this.state.expansionPanelOpen
                   });
                 }}/>}>
                   ....