WRQ-24303: Fix marqueeDecorator and marqueeController to start animation properly when content changed

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 start animation properly when synchronized by `ui/Marquee.MarqueeController` and text changed
+
 ## [4.9.0-beta.1] - 2024-06-17
 
 No significant changes.

packages/ui/Marquee/MarqueeDecorator.js

@@ -374,6 +374,7 @@
 			if (this.context && this.context.register) {
 				this.sync = true;
 				this.context.register(this, {
+					restartAnimation: this.restartAnimation,
 					start: this.start,
 					stop: this.stop
 				});
@@ -412,7 +413,7 @@
 				);
 
 				this.invalidateMetrics();
-				this.cancelAnimation();
+				this.cancelAnimation(forceRestartMarquee);
 				if (forceRestartMarquee && marqueeOn === 'focus') {
 					this.resetAnimation();
 				}
@@ -795,9 +796,9 @@
 		 *
 		 * @returns {undefined}
 		 */
-		cancelAnimation = () => {
+		cancelAnimation = (retryStartingAnimation = false) => {
 			if (this.sync) {
-				this.context.cancel(this);
+				this.context.cancel(retryStartingAnimation);
 				return;
 			}
 

packages/ui/Marquee/useMarqueeController.js

@@ -24,7 +24,7 @@
 	 * Invokes the `action` handler for each synchronized component except the invoking
 	 * `component`.
 	 *
-	 * @param	{String}	action		`'start'` or `'stop'`
+	 * @param	{String}	action		`'start'`, `'stop'`, or `'restartAnimation'`
 	 * @param	{Object}	component	A previously registered component
 	 *
 	 * @returns	{undefined}
@@ -102,22 +102,25 @@
 		}, false);
 	}, []);
 
-	const doCancel = useCallback(() => {
+	const doCancel = useCallback((retryStartingAnimation) => {
 		if (mutableRef.current.isHovered || mutableRef.current.isFocused) {
 			return;
 		}
 		markAll(STATE.inactive);
 		dispatch('stop');
+		if (retryStartingAnimation) {
+			dispatch('restartAnimation');
+		}
 	}, [dispatch, markAll]);
 
-	const cancelJob = useMemo(() => new Job(() => doCancel(), 30), [doCancel]);
+	const cancelJob = useMemo(() => new Job((retryStartingAnimation = false) => doCancel(retryStartingAnimation), 30), [doCancel]);
 
 	/*
-	 * Registers `component` with a set of handlers for `start` and `stop`.
+	 * Registers `component` with a set of handlers for `start`, `stop`, and `restartAnimation`.
 	 *
 	 * @param	{Object}	component	A component, typically a React component instance, on
 	 *									which handlers will be dispatched.
-	 * @param	{Object}	handlers	An object containing `start` and `stop` functions
+	 * @param	{Object}	handlers	An object containing `start`, `stop`, and `restartAnimation` functions
 	 *
 	 * @returns {undefined}
 	 */
@@ -161,7 +164,7 @@
 	 *
 	 * @param	{Object}	component	A previously registered component
 	 *
-	 * @returns	{undefined}f
+	 * @returns	{undefined}
 	 */
 	const handleStart = useCallback((component) => {
 		cancelJob.stop();
@@ -174,13 +177,13 @@
 	/*
 	 * Handler for the `cancel` context function
 	 *
-	 * @param	{Object}	component	A previously registered component
+	 * @param	{Boolean}	retryStartingAnimation	If true, `restartAnimation` called after `cancelJob` completes
 	 *
 	 * @returns	{undefined}
 	 */
-	const handleCancel = useCallback(() => {
+	const handleCancel = useCallback((retryStartingAnimation) => {
 		if (anyRunning()) {
-			cancelJob.start();
+			cancelJob.start(retryStartingAnimation);
 		}
 	}, [anyRunning, cancelJob]);
 
@@ -193,7 +196,7 @@
 	 */
 	const handleComplete = useCallback((component) => {
 		const complete = markReady(component);
-		if (complete) {
+		if (complete && !component.contentFits) {
 			markAll(STATE.ready);
 			dispatch('start');
 		}