CODEWITHSUNDEEP
reactjsmaterial-ui
Mangesh Tak
Mangesh Tak

Reputation: 396

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.

Upvotes: 10

Views: 13103

Answers (5)

pouria khazaei
pouria khazaei

Reputation: 64

const [expanded, setExpanded] = React.useState(false);

<Checkbox 
      value="checked"
      color="primary"
      onClick={() => setExpanded(!expanded)}
 />
<ExpansionPanel expanded={expanded}>
                <ExpansionPanelSummary
                    expandIcon={<ExpandMoreIcon />}
                    onClick={() => setExpanded(!expanded)}
                >
                 ON CLICK OPEN
                </ExpansionPanelSummary>
                <ExpansionPanelDetails>
                  IS OPEN
                </ExpansionPanelDetails>
            </ExpansionPanel>

Upvotes: 1

remacr
remacr

Reputation: 708

For version: "@material-ui/core": "4.9.9"

If you add the onClick only to the expandIcon you are gonna lose all the space of the panel summary to be clicked, additionally, not all users are gonna know at first that they have to click the arrow icon to expand the panel, for that reason, is better to add the onClick event to the ExpansionPanelSummary, by doing this the click event won't cover ExpansionPanelDetails and the entire ExpansionPanelSummary can have its normal behavior to be clicked anywhere and to expand/collapse.

<ExpansionPanel expanded={isExpanded}>
  <ExpansionPanelSummary expandIcon={<ExpandMore />} onClick={handleClickExpansion}>...</ExpansionPanelSummary>
  <ExpansionPanelDetails>....</ExpansionPanelDetails>
</ExpansionPanel>

Upvotes: 1

SK191011
SK191011

Reputation: 1

This will also work should you not be able to stop propagating, in the material-ui source code from ExpansionPanelSummary.js you can comment out the onClick action from the entire panel and place it in the button icon only

return React.createElement(ButtonBase, _extends({
    focusRipple: false,
    disableRipple: true,
    disabled: disabled,
    component: "div",
    "aria-expanded": expanded,
    className: clsx(classes.root, className, disabled && classes.disabled, expanded && classes.expanded, focusedState && classes.focused),
    onFocusVisible: handleFocusVisible,
    onBlur: handleBlur,
    //onClick: handleChange, This makes the entire expansion panel clickable
    ref: ref
  }, other), React.createElement("div", {
    className: clsx(classes.content, expanded && classes.expanded)
  }, children), expandIcon && React.createElement(IconButton, _extends({
    disabled: disabled,
    className: clsx(classes.expandIcon, expanded && classes.expanded),
    edge: "end",
    component: "div",
    onClick: handleChange, //put the onClick event here
    tabIndex: -1,
    "aria-hidden": true
  }, IconButtonProps), expandIcon));
});

Upvotes: 0

ghchoi
ghchoi

Reputation: 5156

You can simply stop propagating an event:

function handleClickCheckbox(e) {
  e.stopPropagation();
  // do something
}

...

<Checkbox value="checkedB"
          color="primary"
          onClick={e => handleClickCheckbox(e)}
/>

https://codesandbox.io/s/431284p0m0

Or more simply:

<Checkbox value="checkedB"
          color="primary"
          onClick={e => {e.stopPropagation();}}
/>

Upvotes: 14

Nikhil
Nikhil

Reputation: 119

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
               });
             }}/>}>
               ....

Upvotes: 0

Related Questions