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 (