diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index 3b367685..2fb644ae 100644 --- 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 => ( - <> + - + ) ], parameters: { diff --git a/src/ebay-dialog-base/components/animation.ts b/src/ebay-dialog-base/components/animation.ts index 4b1754d8..db9fa5f7 100644 --- 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) {