CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
branperr
branperr

Reputation: 514

Material UI accordion animation not working

I'm building out an accordion with Material UI, and I noticed that when I have the Accordion directly in my file's return, it works fine. But if I make a sub-component and return it, the animation does not work. Note that opening the accordion is fine, but it suddenly pops open instead of having that smooth transition. Any idea what's causing this?

Replicated here

Dependencies in sandbox reflect the version in my package.json.

Upvotes: 0

Views: 1036

Answers (1)

Steve G
Steve G

Reputation: 13357

You're [re]defining your QuestionAccordion component inside of your App component, so the re-render is happening before the accordion animation can compete. Define your QuestionAccordion component outside of the App component and it should behave normally. For example:

const QuestionAccordion = ({
  dueAccordionOpen,
  handleAccordionChange,
  questionsMap
}: {
  dueAccordionOpen: boolean;
  handleAccordionChange: (val: QuestionTypes) => void;
  questionsMap: any;
}) => { ... }

export const App = () => { ... }

Working CodeSandbox: https://codesandbox.io/s/material-ui-animation-problem-forked-msohg6?file=/src/App.tsx:995-1021

Upvotes: 1

Related Questions