handle edit mode logic on one-click actions (#34584)

Automattic · Dec 15, 2023 · 6c7f95d · 6c7f95d
1 parent e90e463
commit 6c7f95d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/projects/js-packages/ai-client/changelog/fix-ai-one-click-actions-behavior b/projects/js-packages/ai-client/changelog/fix-ai-one-click-actions-behavior
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+AI Client: fix one click actions behavior on input change
diff --git a/projects/js-packages/ai-client/src/components/ai-control/index.tsx b/projects/js-packages/ai-client/src/components/ai-control/index.tsx
@@ -94,7 +94,7 @@ export function AIControl(
 		if ( ! editRequest && lastValue !== null && value !== lastValue ) {
 			onChange?.( lastValue );
 		}
-	}, [ editRequest, lastValue ] );
+	}, [ editRequest, lastValue, value ] );
 
 	const sendRequest = useCallback( () => {
 		setLastValue( value );
@@ -105,7 +105,17 @@ export function AIControl(
 	const changeHandler = useCallback(
 		( newValue: string ) => {
 			onChange?.( newValue );
-			setEditRequest( state !== 'init' && lastValue && lastValue !== newValue );
+			if ( state === 'init' ) {
+				return;
+			}
+
+			if ( ! lastValue ) {
+				// here we're coming from a one-click action
+				setEditRequest( newValue.length > 0 );
+			} else {
+				// here we're coming from an edit action
+				setEditRequest( newValue !== lastValue );
+			}
 		},
 		[ lastValue, state ]
 	);
@@ -115,6 +125,11 @@ export function AIControl(
 		onAccept?.();
 	}, [] );
 
+	const cancelEdit = useCallback( () => {
+		onChange( lastValue || '' );
+		setEditRequest( false );
+	}, [ lastValue ] );
+
 	// Pass the ref to forwardRef.
 	useImperativeHandle( ref, () => promptUserInputRef.current );
 
@@ -169,7 +184,7 @@ export function AIControl(
 									{ editRequest && (
 										<Button
 											className="jetpack-components-ai-control__controls-prompt_button"
-											onClick={ () => setEditRequest( false ) }
+											onClick={ cancelEdit }
 											variant="secondary"
 											label={ __( 'Cancel', 'jetpack-ai-client' ) }
 										>