Try breaking field group when frm_first class is added to a field in a group

js/src/admin/admin.js

@@ -1514,7 +1514,7 @@
 				layoutClassesInput.value = layoutClassesInput.value.concat( ' frm_first' );
 			}
 
-			jQuery( layoutClassesInput ).trigger( 'change' );
+			jQuery( layoutClassesInput ).trigger( 'change', [ false ] );
 		};
 	}
 
@@ -3254,7 +3254,7 @@
 		return '';
 	}
 
-	function liveChanges() {
+	function liveChanges( event, shouldTryBreakFieldGroup = true ) {
 		/*jshint validthis:true */
 		let option,
 			newValue = this.value,
@@ -3275,7 +3275,7 @@
 					addBlankSelectOption( changes, newValue );
 				}
 			} else if ( att === 'class' ) {
-				changeFieldClass( changes, this );
+				changeFieldClass( changes, this, shouldTryBreakFieldGroup );
 			} else if ( isSliderField( changes ) ) {
 				updateSliderFieldPreview( changes, att, newValue );
 			} else {
@@ -6760,7 +6760,7 @@
 	}
 
 	/* Change the classes in the builder */
-	function changeFieldClass( field, setting ) {
+	function changeFieldClass( field, setting, shouldTryBreakFieldGroup ) {
 		let classes, replace, alignField,
 			replaceWith = ' ' + setting.value,
 			fieldId = field.getAttribute( 'data-fid' );
@@ -6795,9 +6795,38 @@
 			replaceWith = replaceWith.trim();
 		}
 
+		maybeBreakFieldGroup( !! shouldTryBreakFieldGroup, field, classes, replaceWith );
+
 		field.className = field.className.replace( replace, replaceWith );
 	}
 
+	/**
+	 * @param {Boolean} shouldTryBreakFieldGroup
+	 * @param {HTMLElement} field
+	 * @param {String} classes
+	 * @param {String} replaceWith
+	 *
+	 * @return {void}
+	 */
+	function maybeBreakFieldGroup( shouldTryBreakFieldGroup, field, classes, replaceWith ) {
+		if ( ! shouldTryBreakFieldGroup || ! replaceWith.includes( 'frm_first' ) || classes.includes( 'frm_first' ) ) {
+			return;
+		}
+
+		const fieldsInFieldGroup = Array.from( field.parentElement.children );
+		const indexOfTargetField = fieldsInFieldGroup.indexOf( field );
+		const fieldGroup = field.parentElement.closest( 'li.frm_field_box.ui-draggable' );
+
+		const newFieldGroup = fieldGroup.cloneNode( true );
+		fieldsInFieldGroup.slice( indexOfTargetField ).map( field => field.remove() );
+		fieldGroup.after( newFieldGroup );
+		const fieldsInNewFieldGroup = Array.from( newFieldGroup.firstChild.children );
+		fieldsInNewFieldGroup.slice( 0, indexOfTargetField ).map( field => field.remove() );
+
+		makeDroppable( newFieldGroup.querySelector( 'ul.frm_sorting' ) );
+		newFieldGroup.querySelectorAll( '.form-field' ).forEach( field => makeDraggable( field, '.frm-move' ) );
+	}
+
 	function maybeShowInlineModal( e ) {
 		/*jshint validthis:true */
 		e.preventDefault();