fix: remove flicker in AccordionItem (carbon-design-system#9818)

Removes the flickering effect when using AccordionItem as a controlled component
cesardlinx · Oct 4, 2023 · b4641ef · b4641ef
1 parent bb67d1c
commit b4641ef
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 10 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -1268,6 +1268,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "cesardlinx",
+      "name": "David Padilla",
+      "avatar_url": "https://avatars.githubusercontent.com/u/25573926?v=4",
+      "profile": "https://www.davidpadilla.dev/",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

diff --git a/README.md b/README.md
@@ -254,6 +254,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/cordesmj"><img src="https://avatars.githubusercontent.com/u/7409239?v=4?s=100" width="100px;" alt=""/><br /><sub><b>cordesmj</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=cordesmj" title="Code">💻</a></td>
     <td align="center"><a href="https://med-aziz-chebbi.web.app/"><img src="https://avatars.githubusercontent.com/u/60013060?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Aziz Chebbi</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=azizChebbi" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/misiekhardcore"><img src="https://avatars.githubusercontent.com/u/58469680?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michał Konopski</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=misiekhardcore" title="Code">💻</a></td>
+    <td align="center"><a href="https://www.davidpadilla.dev/"><img src="https://avatars.githubusercontent.com/u/25573926?v=4?s=100" width="100px;" alt=""/><br /><sub><b>David Padilla</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=cesardlinx" title="Code">💻</a></td>
   </tr>
 </table>
 

diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js
@@ -7,7 +7,7 @@
 
 /* eslint-disable no-console */
 
-import React from 'react';
+import React, { useState } from 'react';
 import {
   default as Accordion,
   AccordionItem,
@@ -108,6 +108,49 @@ export const _WithLayer = () => (
   </WithLayer>
 );
 
+export const Controlled = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Accordion>
+      <AccordionItem
+        title="Section 1 title"
+        open={open}
+        onHeadingClick={({ isOpen }) => setOpen(isOpen)}>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
 export const Skeleton = (args) => (
   <AccordionSkeleton open count={4} {...args} />
 );

diff --git a/packages/react/src/components/Accordion/AccordionItem.tsx b/packages/react/src/components/Accordion/AccordionItem.tsx
@@ -117,7 +117,6 @@ function AccordionItem({
   ...rest
 }: PropsWithChildren<AccordionItemProps>) {
   const [isOpen, setIsOpen] = useState(open);
-  const [prevIsOpen, setPrevIsOpen] = useState(open);
   const [animation, setAnimation] = useState('');
   const accordionState = useContext(AccordionContext);
 
@@ -138,17 +137,11 @@ function AccordionItem({
 
   const Toggle = renderToggle || renderExpando; // remove renderExpando in next major release
 
-  if (open !== prevIsOpen) {
-    setAnimation(isOpen ? 'collapsing' : 'expanding');
-    setIsOpen(open);
-    setPrevIsOpen(open);
-  }
-
   // When the AccordionItem heading is clicked, toggle the open state of the
   // panel
   function onClick(event) {
     const nextValue = !isOpen;
-    setAnimation(isOpen ? 'collapsing' : 'expanding');
+    setAnimation(isOpen ? '' : 'expanding');
     setIsOpen(nextValue);
     if (onHeadingClick) {
       // TODO: normalize signature, potentially:
@@ -168,7 +161,6 @@ function AccordionItem({
     if (handleAnimationEnd) {
       handleAnimationEnd(event);
     }
-    setAnimation('');
   }
 
   return (