Contact Form: Allow users to add multiple options to a dropdown field (…

…#37739) * Contact Form: Allow users to add multiple options to a dropdown field * Bump Forms package version --------- Co-authored-by: Karen Attfield <[email protected]>
Automattic · Jun 7, 2024 · 91b2516 · 91b2516
1 parent 30a8df6
commit 91b2516
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 11 deletions.
diff --git a/projects/packages/forms/changelog/fix-dropddown-field-options b/projects/packages/forms/changelog/fix-dropddown-field-options
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fixed
+
+Allow users to add multiple options to a dropdown field
diff --git a/projects/packages/forms/composer.json b/projects/packages/forms/composer.json
@@ -67,7 +67,7 @@
 			"link-template": "https://github.com/automattic/jetpack-forms/compare/v${old}...v${new}"
 		},
 		"branch-alias": {
-			"dev-trunk": "0.31.x-dev"
+			"dev-trunk": "0.32.x-dev"
 		},
 		"textdomain": "jetpack-forms",
 		"version-constants": {

diff --git a/projects/packages/forms/package.json b/projects/packages/forms/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-forms",
-	"version": "0.31.5-alpha",
+	"version": "0.32.0-alpha",
 	"description": "Jetpack Forms",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/forms/#readme",
 	"bugs": {

diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-dropdown.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-dropdown.js
@@ -4,6 +4,7 @@ import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { isEmpty, isNil, noop, split, trim } from 'lodash';
+import { getCaretPosition } from '../util/caret';
 import { setFocus } from '../util/focus';
 import { useFormStyle, useFormWrapper } from '../util/form';
 import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
@@ -64,18 +65,29 @@ const JetpackDropdown = ( { attributes, clientId, isSelected, name, setAttribute
 		}
 	};
 
-	const handleSplitOption = index => ( value, isOriginal ) => {
-		if ( ! isOriginal ) {
+	const handleKeyDown = index => e => {
+		// Create a new dropdown option when the user hits Enter.
+		// Previously handled with the onSplit prop, which was removed in https://github.com/WordPress/gutenberg/pull/54543
+		if ( 'Enter' !== e.key ) {
 			return;
 		}
 
-		const splitValue = attributes.options[ index ].slice( value.length );
+		e.preventDefault();
 
-		if ( isEmpty( value ) && isEmpty( splitValue ) ) {
+		const value = attributes.options[ index ];
+
+		if ( ! value ) {
 			return;
 		}
 
-		handleMultiValues( index, [ value, splitValue ] );
+		const caretPos = getCaretPosition( e.target );
+		// splitValue is the value after the caret position when a user hits Enter
+		const splitValue = caretPos ? value.slice( caretPos ) : '';
+
+		handleMultiValues(
+			index,
+			splitValue ? [ value.slice( 0, caretPos ), splitValue ] : [ value, '' ]
+		);
 	};
 
 	const handleDeleteOption = index => () => {
@@ -134,7 +146,7 @@ const JetpackDropdown = ( { attributes, clientId, isSelected, name, setAttribute
 							key={ index }
 							value={ option }
 							onChange={ handleChangeOption( index ) }
-							onSplit={ handleSplitOption( index ) }
+							onKeyDown={ handleKeyDown( index ) }
 							onRemove={ handleDeleteOption( index ) }
 							onReplace={ noop }
 							placeholder={ __( 'Add option…', 'jetpack-forms' ) }

diff --git a/projects/packages/forms/src/blocks/contact-form/util/caret.js b/projects/packages/forms/src/blocks/contact-form/util/caret.js
@@ -0,0 +1,22 @@
+/**
+ * Get the caret position in an active contenteditable element
+ * From https://gist.github.com/loilo/f873a88631e660c59a1d5ab757ca9b1e
+ *
+ * @param {HTMLElement} target - Contenteditable element of which to get the caret position
+ * @returns {number} The caret position
+ */
+export const getCaretPosition = target => {
+	const sel = target.ownerDocument.defaultView.getSelection();
+
+	if ( sel.rangeCount === 0 ) {
+		return 0;
+	}
+
+	const range = sel.getRangeAt( 0 );
+
+	const preCaretRange = range.cloneRange();
+	preCaretRange.selectNodeContents( target );
+	preCaretRange.setEnd( range.endContainer, range.endOffset );
+
+	return preCaretRange.toString().length;
+};
diff --git a/projects/packages/forms/src/class-jetpack-forms.php b/projects/packages/forms/src/class-jetpack-forms.php
@@ -15,7 +15,7 @@
  */
 class Jetpack_Forms {
 
-	const PACKAGE_VERSION = '0.31.5-alpha';
+	const PACKAGE_VERSION = '0.32.0-alpha';
 
 	/**
 	 * Load the contact form module.

diff --git a/projects/plugins/jetpack/changelog/fix-dropddown-field-options b/projects/plugins/jetpack/changelog/fix-dropddown-field-options
@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Updated composer.lock.
+
+
diff --git a/projects/plugins/jetpack/composer.lock b/projects/plugins/jetpack/composer.lock