From b4641ef6e38431aca4a4e4ef008ce0d1d7af2a8a Mon Sep 17 00:00:00 2001
From: David Padilla <davidpadilla.f22@gmail.com>
Date: Wed, 4 Oct 2023 08:42:35 -0500
Subject: [PATCH] fix: remove flicker in AccordionItem (#9818)

Removes the flickering effect when using AccordionItem as a controlled
component
---
 .all-contributorsrc                           |  9 ++++
 README.md                                     |  1 +
 .../components/Accordion/Accordion.stories.js | 45 ++++++++++++++++++-
 .../components/Accordion/AccordionItem.tsx    | 10 +----
 4 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 6e3ad91a49d7..aa34fd8799eb 100644
--- 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
index 2118c5c3ba11..5b66330aa343 100644
--- 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
index 02ff315ca1b7..c6030e0d53a0 100644
--- 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
index 20ed8235c428..e978d0cc7c82 100644
--- 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 (