Skip to content

Commit

Permalink
Forms: move Single and Multiple Choice input caret to the end on focus (
Browse files Browse the repository at this point in the history
#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 <[email protected]>
  • Loading branch information
monsieur-z and coder-karen authored Aug 28, 2024
1 parent 8308287 commit 40cedaa
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 0 deletions.
5 changes: 5 additions & 0 deletions projects/packages/forms/changelog/fix-choice-field-caret
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Significance: patch
Type: fixed
Comment: Move Single and Multiple Choice input caret to the end on focus


Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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" />
Expand Down
21 changes: 21 additions & 0 deletions projects/packages/forms/src/blocks/contact-form/util/caret.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
};

0 comments on commit 40cedaa

Please sign in to comment.