From 40cedaa5690cb8d22f67539f5c81d7bc7cd1f06a Mon Sep 17 00:00:00 2001
From: Kev <kevin.zoschke@automattic.com>
Date: Wed, 28 Aug 2024 08:20:38 -0400
Subject: [PATCH] Forms: move Single and Multiple Choice input caret to the end
 on focus (#39083)

* Forms: update child blocks to API v3

* Remove extra padding form Form

* Fix styles not applied to fields

* Forms: move Single and Multiple Choice input caret to the end on focus

* changelog

* Fix erroneous conflict resolve

---------

Co-authored-by: Karen Attfield <karenlattfield@gmail.com>
---
 .../forms/changelog/fix-choice-field-caret    |  5 +++++
 .../components/jetpack-field-option.js        | 14 +++++++++++++
 .../src/blocks/contact-form/util/caret.js     | 21 +++++++++++++++++++
 3 files changed, 40 insertions(+)
 create mode 100644 projects/packages/forms/changelog/fix-choice-field-caret

diff --git a/projects/packages/forms/changelog/fix-choice-field-caret b/projects/packages/forms/changelog/fix-choice-field-caret
new file mode 100644
index 0000000000000..93120cce24a34
--- /dev/null
+++ b/projects/packages/forms/changelog/fix-choice-field-caret
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Move Single and Multiple Choice input caret to the end on focus
+
+
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-option.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-option.js
index c96230db51222..9ba0c4477d69c 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-option.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-option.js
@@ -1,10 +1,12 @@
 import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { first } from 'lodash';
 import { supportsParagraphSplitting } from '../util/block-support';
+import { moveCaretToEnd } from '../util/caret';
 import { useParentAttributes } from '../util/use-parent-attributes';
 import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
@@ -44,10 +46,22 @@ export const JetpackFieldOptionEdit = ( {
 		removeBlock( clientId );
 	};
 
+	const handleFocus = e => moveCaretToEnd( e.target );
+
 	const supportsSplitting = supportsParagraphSplitting();
 	const type = name.replace( 'jetpack/field-option-', '' );
 	const classes = clsx( 'jetpack-field-option', `field-option-${ type }` );
 
+	useEffect( () => {
+		const input = document.getElementById( blockProps.id );
+
+		input?.addEventListener( 'focus', handleFocus );
+
+		return () => {
+			input?.removeEventListener( 'focus', handleFocus );
+		};
+	}, [ blockProps.id ] );
+
 	return (
 		<div className={ classes } style={ optionStyle }>
 			<input type={ type } className="jetpack-option__type" tabIndex="-1" />
diff --git a/projects/packages/forms/src/blocks/contact-form/util/caret.js b/projects/packages/forms/src/blocks/contact-form/util/caret.js
index a5748ff3cd88b..253f0498d235d 100644
--- a/projects/packages/forms/src/blocks/contact-form/util/caret.js
+++ b/projects/packages/forms/src/blocks/contact-form/util/caret.js
@@ -20,3 +20,24 @@ export const getCaretPosition = target => {
 
 	return preCaretRange.toString().length;
 };
+
+/**
+ * Move the caret position in an active contenteditable element to the end
+ *
+ * @param {HTMLElement} target - Contenteditable element of which to move the caret
+ */
+export const moveCaretToEnd = target => {
+	if ( 'undefined' === typeof window ) {
+		return;
+	}
+
+	// Add the contenteditable element to a new selection and collapse it to the end
+	const range = document.createRange();
+	range.selectNodeContents( target );
+	range.collapse( false );
+
+	// Clear the window selection object and add the new selection
+	const selection = window.getSelection();
+	selection.removeAllRanges();
+	selection.addRange( range );
+};