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

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
+
+

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" />

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 );
+};