From 70c5e618ccb152bec6a11bf50b1ed9e210054ecd Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 2 Feb 2024 13:02:56 +0400 Subject: [PATCH 1/3] Components: Fix the Snackbar auto-dismissal timers --- packages/components/src/snackbar/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/components/src/snackbar/index.tsx b/packages/components/src/snackbar/index.tsx index 7460b481a7fed7..4338ad90e0c7f0 100644 --- a/packages/components/src/snackbar/index.tsx +++ b/packages/components/src/snackbar/index.tsx @@ -88,8 +88,8 @@ function UnforwardedSnackbar( useSpokenMessage( spokenMessage, politeness ); - // Only set up the timeout dismiss if we're not explicitly dismissing. useEffect( () => { + // Only set up the timeout dismiss if we're not explicitly dismissing. const timeoutHandle = setTimeout( () => { if ( ! explicitDismiss ) { onDismiss?.(); @@ -98,7 +98,10 @@ function UnforwardedSnackbar( }, NOTICE_TIMEOUT ); return () => clearTimeout( timeoutHandle ); - }, [ onDismiss, onRemove, explicitDismiss ] ); + // The `onDismiss/onRemove` can have unstable references, + // trigger side-effect cleanup, and reset timers. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ explicitDismiss ] ); const classes = classnames( className, 'components-snackbar', { 'components-snackbar-explicit-dismiss': !! explicitDismiss, From 84d2ac17ac117c1db4abb25ef4cd2cc2a7366283 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 2 Feb 2024 15:57:02 +0400 Subject: [PATCH 2/3] Add changelong entry --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 8f0a224b7c7ec0..4b3aebbfd70c31 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -14,6 +14,7 @@ - `Placeholder`: Fix Placeholder component padding when body text font size is changed ([#58323](https://github.com/WordPress/gutenberg/pull/58323)). - `Placeholder`: Fix Global Styles typography settings bleeding into placeholder component ([#58303](https://github.com/WordPress/gutenberg/pull/58303)). - `PaletteEdit`: Fix palette item accessibility in details view ([#58214](https://github.com/WordPress/gutenberg/pull/58214)). +- `Snackbar`: Fix the auto-dismissal timers ([#58604](https://github.com/WordPress/gutenberg/pull/58604)). ### Experimental From 6bacb67d1baa6f0a7aada90fd22d960e4369bb1a Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 2 Feb 2024 16:12:47 +0400 Subject: [PATCH 3/3] Use latest ref pattern --- packages/components/src/snackbar/index.tsx | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/components/src/snackbar/index.tsx b/packages/components/src/snackbar/index.tsx index 4338ad90e0c7f0..48eb8ed4873801 100644 --- a/packages/components/src/snackbar/index.tsx +++ b/packages/components/src/snackbar/index.tsx @@ -8,7 +8,13 @@ import classnames from 'classnames'; * WordPress dependencies */ import { speak } from '@wordpress/a11y'; -import { useEffect, forwardRef, renderToString } from '@wordpress/element'; +import { + useEffect, + useLayoutEffect, + useRef, + forwardRef, + renderToString, +} from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import warning from '@wordpress/warning'; @@ -88,19 +94,23 @@ function UnforwardedSnackbar( useSpokenMessage( spokenMessage, politeness ); + // The `onDismiss/onRemove` can have unstable references, + // trigger side-effect cleanup, and reset timers. + const callbackRefs = useRef( { onDismiss, onRemove } ); + useLayoutEffect( () => { + callbackRefs.current = { onDismiss, onRemove }; + } ); + useEffect( () => { // Only set up the timeout dismiss if we're not explicitly dismissing. const timeoutHandle = setTimeout( () => { if ( ! explicitDismiss ) { - onDismiss?.(); - onRemove?.(); + callbackRefs.current.onDismiss?.(); + callbackRefs.current.onRemove?.(); } }, NOTICE_TIMEOUT ); return () => clearTimeout( timeoutHandle ); - // The `onDismiss/onRemove` can have unstable references, - // trigger side-effect cleanup, and reset timers. - // eslint-disable-next-line react-hooks/exhaustive-deps }, [ explicitDismiss ] ); const classes = classnames( className, 'components-snackbar', {