WRO-8481: Fixed MarqueeDecorator to restart animation properly with…

… React 18 (#3075) * WRO-8481: Fixed marqueeDecorator to synchronously update animating state when restarting animation Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com) * Fixed changelog.md Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)
enactjs · Jul 25, 2022 · 700d63b · 700d63b
1 parent 52dc872
commit 700d63b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 The following is a curated list of changes in the Enact ui module, newest changes on the top.
 
+## [unreleased]
+
+### Fixed
+
+- `ui/Marquee.MarqueeDecorator` to restart animation properly with React 18
+
 ## [4.5.0] - 2022-07-19
 
 No significant changes.

diff --git a/packages/ui/Marquee/MarqueeDecorator.js b/packages/ui/Marquee/MarqueeDecorator.js
@@ -7,6 +7,7 @@ import {is} from '@enact/core/keymap';
 import {Job, shallowEqual} from '@enact/core/util';
 import PropTypes from 'prop-types';
 import {PureComponent} from 'react';
+import {flushSync} from 'react-dom';
 import warning from 'warning';
 
 import {scale} from '../resolution';
@@ -728,8 +729,10 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 		 * @returns {undefined}
 		 */
 		restartAnimation = (delay) => {
-			this.setState({
-				animating: false
+			flushSync(() => {
+				this.setState({
+					animating: false
+				});
 			});
 			// synchronized Marquees defer to the controller to restart them
 			if (this.sync) {