fix(SidePanel): resolve storybook SlideOver animation flickering in d…

…oc page (#6554) * refactor(useFocus): refactor repeated useEffect code * fix(SidePanel): resolve storybook flickering issue * fix(SidePanel): resolve storybook flickering issue
carbon-design-system · Dec 23, 2024 · 03c31fc · 03c31fc
1 parent 660c98a
commit 03c31fc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 19 deletions.
diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.docs-page.js b/packages/ibm-products/src/components/SidePanel/SidePanel.docs-page.js
@@ -8,7 +8,7 @@
 import React from 'react';
 import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
 
-import * as stories from './SidePanel';
+import * as stories from './SidePanel.stories';
 
 const DocsPage = () => (
   <StoryDocsPage

diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.tsx b/packages/ibm-products/src/components/SidePanel/SidePanel.tsx
@@ -553,7 +553,7 @@ export let SidePanel = React.forwardRef(
       if (!open) {
         onUnmount?.();
       }
-      setAnimationComplete(true);
+      setAnimationComplete(!animationComplete);
     };
 
     // Set the internal state `animationComplete` to true if
@@ -631,26 +631,24 @@ export let SidePanel = React.forwardRef(
     ]);
 
     useEffect(() => {
-      if (open) {
-        setTimeout(() => {
+      if (open && animationComplete) {
+        if (
+          selectorPrimaryFocus &&
+          getSpecificElement(sidePanelRef?.current, selectorPrimaryFocus)
+        ) {
+          const primeFocusEl = getSpecificElement(
+            sidePanelRef?.current,
+            selectorPrimaryFocus
+          );
           if (
-            selectorPrimaryFocus &&
-            getSpecificElement(sidePanelRef?.current, selectorPrimaryFocus)
+            primeFocusEl &&
+            window?.getComputedStyle(primeFocusEl)?.display !== 'none'
           ) {
-            const primeFocusEl = getSpecificElement(
-              sidePanelRef?.current,
-              selectorPrimaryFocus
-            );
-            if (
-              primeFocusEl &&
-              window?.getComputedStyle(primeFocusEl)?.display !== 'none'
-            ) {
-              (primeFocusEl as HTMLElement)?.focus();
-            }
-          } else if (!slideIn) {
-            firstElement?.focus();
+            setTimeout(() => primeFocusEl?.focus(), 0);
           }
-        }, 0);
+        } else if (!slideIn) {
+          setTimeout(() => firstElement?.focus(), 0);
+        }
       }
     }, [
       animationComplete,