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