MUI: ExpansionPanel with TransitionComponent doesn't collapse the item

user_7251050 0
Viewed 1212

I'm using ExpansionPanel with TransitionComponent property, when I set default value (Collapse) expansion panel is working fine, but if value is another (Fade, Grow and others), collapsed component has same height as expanded

<ExpansionPanel
    expanded={expanded === '1'}
    onChange={handleChange('1')}
    TransitionComponent={Slide}
    TransitionProps={{ mountOnEnter: true }}
    className={classnames('accordion-item', expanded === '1' && 'selected')}
>

UPD: there is a snippet https://codesandbox.io/s/vigorous-tree-621cz?fontsize=14&hidenavigation=1&theme=dark

material-ui reactjs
1 Answers

There are two aspects needed to get the Slide transition working appropriately.

In order for the height to adjust appropriately you need to specify both mountOnEnter and unmountOnExit in the TransitionProps.

The other aspect to deal with is the timeout prop. Accordion (previously ExpansionPanel) specifies the timeout as "auto", but "auto" is only supported as a timeout value by Collapse so you need to specify a valid timeout for Slide. In my modified version of your sandbox, I'm using the default values for Slide of 225 for enter and 195 for exit.

Here's a working example:

import React, { useState } from "react";
import {
  Accordion,
  AccordionSummary,
  AccordionDetails,
  Slide
} from "@material-ui/core/";

const slideProps = {
  mountOnEnter: true,
  unmountOnExit: true,
  timeout: { enter: 225, exit: 195 }
};

export default function App() {
  const [expanded, setExpanded] = useState(null);
  return (
    <>
      <Accordion
        TransitionComponent={Slide}
        TransitionProps={slideProps}
        expanded={expanded === "1"}
        onChange={() => setExpanded("1")}
      >
        <AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
          First
        </AccordionSummary>
        <AccordionDetails>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
          dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
          lacus ex, sit amet blandit leo lobortis eget.
        </AccordionDetails>
      </Accordion>
      <Accordion
        TransitionComponent={Slide}
        TransitionProps={slideProps}
        expanded={expanded === "2"}
        onChange={() => setExpanded("2")}
      >
        <AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
          Second
        </AccordionSummary>
        <AccordionDetails>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
          dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
          lacus ex, sit amet blandit leo lobortis eget.
        </AccordionDetails>
      </Accordion>
    </>
  );
}

Edit Slide in Accordion

user_74959300
Related