fix(DialogBase): Don't trigger the hide animation on strict mode (#375)

eBay · Nov 4, 2024 · d201e5e · d201e5e
1 parent 40186b7
commit d201e5e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {StrictMode} from 'react'
 import { EbaySvg } from '../src/ebay-svg'
 
 import "@ebay/skin"
@@ -8,10 +8,10 @@ import "@ebay/skin/marketsans"
 export default {
     decorators: [
         Story => (
-            <>
+            <StrictMode>
                 <EbaySvg/>
                 <Story/>
-            </>
+            </StrictMode>
         )
     ],
     parameters: {

diff --git a/src/ebay-dialog-base/components/animation.ts b/src/ebay-dialog-base/components/animation.ts
@@ -30,7 +30,7 @@ export function useDialogAnimation({
     enabled,
     onTransitionEnd
 }: DialogAnimationHookProps): void {
-    const firstRender = useRef(true)
+    const previousOpenValue = useRef(open)
 
     useLayoutEffect(() => {
         if (!enabled) {
@@ -54,7 +54,9 @@ export function useDialogAnimation({
                 classPrefix,
                 onTransitionEnd
             })
-        } else if (!firstRender.current) {
+        // Trigger the hide animation only when that "open" value changed to make sure it doesn't flicker the dialog.
+        // The error was visible in StrictMode where the component renders twice.
+        } else if (previousOpenValue.current !== open) {
             cancelCurrentAnimation = hideAnimation({
                 dialog: dialogRef,
                 waitFor: transitionElements,
@@ -63,7 +65,7 @@ export function useDialogAnimation({
             })
         }
 
-        firstRender.current = false
+        previousOpenValue.current = open
 
         return () => {
             if (cancelCurrentAnimation) {