Try to fix unique id issue

classes/controllers/FrmFieldsController.php

@@ -68,10 +68,11 @@ public static function create() {
 		$field_type    = FrmAppHelper::get_post_param( 'field_type', '', 'sanitize_text_field' );
 		$form_id       = FrmAppHelper::get_post_param( 'form_id', 0, 'absint' );
 		$field_options = FrmAppHelper::get_post_param( 'field_options', array(), 'wp_kses_post' );
+		$field_order   = FrmAppHelper::get_post_param( 'field_order', 0, 'absint' );
 
 		do_action( 'frm_before_create_field', $field_type, $form_id );
 
-		$field = self::include_new_field( $field_type, $form_id, $field_options );
+		$field = self::include_new_field( $field_type, $form_id, $field_options, $field_order );
 
 		// This hook will allow for multiple fields to be added at once
 		do_action( 'frm_after_field_created', $field, $form_id );
@@ -82,14 +83,18 @@ public static function create() {
 	/**
 	 * Set up and create a new field
 	 *
+	 * @since x.x The $field_order parameter was added.
+	 *
 	 * @param string $field_type
 	 * @param int    $form_id
 	 * @param array  $field_options
+	 * @param int    $field_order   The field order reserved by the form builder.
+	 *                              Pass 0 to allocate one from the database instead.
 	 *
 	 * @return array|false
 	 */
-	public static function include_new_field( $field_type, $form_id, $field_options = array() ) {
-		$field_values = FrmFieldsHelper::setup_new_vars( $field_type, $form_id );
+	public static function include_new_field( $field_type, $form_id, $field_options = array(), $field_order = 0 ) {
+		$field_values = FrmFieldsHelper::setup_new_vars( $field_type, $form_id, $field_order );
 
 		if ( $field_options ) {
 			$field_values['field_options'] = array_merge( $field_values['field_options'], $field_options );

classes/helpers/FrmFieldsHelper.php

@@ -13,12 +13,16 @@ class FrmFieldsHelper {
 	private static $context_is_safe_to_load_field_options_from_request_data;
 
 	/**
+	 * @since x.x The $field_order parameter was added.
+	 *
 	 * @param string     $type
 	 * @param int|string $form_id
+	 * @param int        $field_order The field order reserved by the form builder.
+	 *                                Pass 0 to allocate one from the database instead.
 	 *
 	 * @return array
 	 */
-	public static function setup_new_vars( $type = '', $form_id = '' ) {
+	public static function setup_new_vars( $type = '', $form_id = '', $field_order = 0 ) {
 		if ( str_contains( $type, '|' ) ) {
 			list( $type, $setting ) = explode( '|', $type );
 		}
@@ -33,9 +37,24 @@ public static function setup_new_vars( $type = '', $form_id = '' ) {
 			array( 'order_by' => 'field_order DESC' )
 		);
 
+		$field_count = (int) $field_count;
+
+		/*
+		 * A reserved order is used exactly as it was given. The form builder reserves
+		 * one for every field it adds, because the count above is read in a query of
+		 * its own, so requests that overlap, which is what happens when fields are
+		 * dragged in faster than the requests come back, all read the same count and
+		 * would share an order. Fields sorted on an ambiguous field_order then swap
+		 * places between page loads. Reservations are already unique, so falling back
+		 * to the count for the ones that arrive out of order would only put two of
+		 * them back on the same value. Nothing is reserved when other code creates a
+		 * field, which is what the fallback is for.
+		 */
+		$field_order = $field_order > 0 ? $field_order : $field_count + 1;
+
 		$values['field_key']   = FrmAppHelper::get_unique_key( '', $wpdb->prefix . 'frm_fields', 'field_key' );
 		$values['form_id']     = $form_id;
-		$values['field_order'] = $field_count + 1;
+		$values['field_order'] = $field_order;
 
 		$values['field_options']['custom_html'] = self::get_default_html( $type );
 
@@ -47,12 +66,44 @@ public static function setup_new_vars( $type = '', $form_id = '' ) {
 			}
 		}
 
-		// Increase the field order of submit field and fields in the same row.
-		FrmSubmitHelper::update_last_row_fields_order_when_adding_field( $field_count );
+		/*
+		 * Increase the field order of submit field and fields in the same row. The
+		 * highest order wins so that the submit row stays after every field, even
+		 * when this request reserved an order below one that is still in flight.
+		 */
+		FrmSubmitHelper::update_last_row_fields_order_when_adding_field( max( $field_order, $field_count ) );
 
 		return $values;
 	}
 
+	/**
+	 * Get the field order the form builder should count up from.
+	 *
+	 * The builder reserves an order for every field it adds so that overlapping
+	 * insert requests cannot share one. This is the value it starts from. Child
+	 * forms are included because a single counter covers every form the builder
+	 * can add a field to, and that includes the child form behind a repeater.
+	 *
+	 * @since x.x
+	 *
+	 * @param int|string $form_id The ID of the form being edited.
+	 *
+	 * @return int
+	 */
+	public static function get_next_field_order( $form_id ) {
+		$form_ids   = FrmDb::get_col( 'frm_forms', array( 'parent_form_id' => $form_id ), 'id' );
+		$form_ids[] = $form_id;
+
+		$highest_order = FrmDb::get_var(
+			'frm_fields',
+			array( 'form_id' => $form_ids ),
+			'field_order',
+			array( 'order_by' => 'field_order DESC' )
+		);
+
+		return (int) $highest_order;
+	}
+
 	/**
 	 * @param array  $field
 	 * @param string $plus

classes/views/frm-forms/form.php

@@ -46,7 +46,7 @@
 		?>
 	</div>
 
-	<ul id="frm-show-fields" class="frm_sorting inside">
+	<ul id="frm-show-fields" class="frm_sorting inside" data-next-field-order="<?php echo esc_attr( FrmFieldsHelper::get_next_field_order( $form->id ) ); ?>">
 		<?php
 		if ( ! empty( $values['fields'] ) ) {
 			$grid_helper     = new FrmFieldGridHelper();

js/src/admin/admin.js

@@ -255,6 +255,7 @@ window.frmAdminBuildJS = function() {
 	let fieldsUpdated = 0;
 	let thisFormId = 0;
 	let autoId = 0;
+	let nextFieldOrder = 0;
 	const optionMap = {};
 	let lastNewActionIdReturned = 0;
 
@@ -1860,6 +1861,7 @@ window.frmAdminBuildJS = function() {
 	 * Get the arguments for inserting a new field.
 	 *
 	 * @since 6.23
+	 * @since x.x A field_order is reserved for the new field.
 	 *
 	 * @param {string} fieldType The type of field to insert.
 	 * @param {string} sectionId The section ID to insert into.
@@ -1884,6 +1886,8 @@ window.frmAdminBuildJS = function() {
 			fieldArgs.last_row_field_ids = getFieldIdsInSubmitRow();
 		}
 
+		fieldArgs.field_order = reserveFieldOrder( isInRepeater ? 0 : fieldArgs.last_row_field_ids.length );
+
 		return fieldArgs;
 	}
 
@@ -1940,6 +1944,7 @@ window.frmAdminBuildJS = function() {
 			url: ajaxurl,
 			data: getInsertNewFieldArgs( fieldType, sectionId, formId, hasBreak ),
 			success( msg ) {
+				syncFieldOrderWithResponse( msg );
 				handleInsertFieldByDraggingResponse( msg, $placeholder );
 
 				const fieldId = checkMsgForFieldId( msg );
@@ -2064,6 +2069,76 @@ window.frmAdminBuildJS = function() {
 		return ++autoId;
 	}
 
+	/**
+	 * Reserve a unique field_order for a field that is about to be created.
+	 *
+	 * The server cannot allocate this on its own. It reads the current highest
+	 * field_order and inserts the row in two separate queries, so requests that
+	 * overlap, which is what happens when fields are dragged in faster than the
+	 * requests come back, all read the same value and end up sharing an order.
+	 * Fields are then sorted on an ambiguous field_order and swap places between
+	 * page loads. JavaScript is single threaded, so a counter here can never hand
+	 * out the same value twice.
+	 *
+	 * @since x.x
+	 *
+	 * @param {number} lastRowFieldCount How many fields in the submit row the server
+	 *                                   will push after the new one.
+	 * @return {number} The reserved field order, or 0 to let the server pick one.
+	 */
+	function reserveFieldOrder( lastRowFieldCount ) {
+		if ( ! nextFieldOrder ) {
+			// There is nothing to count up from yet, so let the server allocate the
+			// order the way it always has rather than risk handing out one that is
+			// already taken. The first response seeds the counter for the rest.
+			return 0;
+		}
+
+		const reserved = ++nextFieldOrder;
+
+		// The submit row is moved to the orders directly after the new field, so
+		// step over those as well to leave the next reservation somewhere free.
+		nextFieldOrder += lastRowFieldCount;
+
+		return reserved;
+	}
+
+	/**
+	 * Catch the counter up to the orders the server actually used.
+	 *
+	 * One insert can move or create more than one field. A section also gets an end
+	 * divider, a summary field can add a page break, and the submit row is pushed
+	 * along behind them. Those orders are all picked server side, where they are
+	 * still read from the database, so they can land above the counter. The response
+	 * reports every one of them, which makes it the authority on what was used.
+	 *
+	 * @since x.x
+	 *
+	 * @param {string} html The field HTML returned by the insert request.
+	 * @return {void}
+	 */
+	function syncFieldOrderWithResponse( html ) {
+		const wrapper = div();
+		wrapper.innerHTML = html;
+
+		const orders = [];
+
+		wrapper.querySelectorAll( 'input[name^="field_options[field_order_"]' ).forEach(
+			input => orders.push( parseInt( input.value, 10 ) )
+		);
+
+		const lastRowOrderInput = wrapper.querySelector( '#frm-last-row-fields-order' );
+		if ( lastRowOrderInput ) {
+			Object.values( JSON.parse( lastRowOrderInput.value ) ).forEach(
+				order => orders.push( parseInt( order, 10 ) )
+			);
+		}
+
+		if ( orders.length ) {
+			nextFieldOrder = Math.max( nextFieldOrder, ...orders );
+		}
+	}
+
 	/**
 	 * Determine if a draggable element can be droppable into a droppable element.
 	 *
@@ -2509,6 +2584,7 @@ window.frmAdminBuildJS = function() {
 				url: ajaxurl,
 				data: Object.assign( getInsertNewFieldArgs( fieldType, 0, formId, hasBreak ), { field_options: fieldOptions } ),
 				success( msg ) {
+					syncFieldOrderWithResponse( msg );
 					resolve( msg );
 
 					setTimeout( () => {
@@ -11046,6 +11122,7 @@ window.frmAdminBuildJS = function() {
 			debouncedSyncAfterDragAndDrop = debounce( syncAfterDragAndDrop, 10 );
 			postBodyContent = document.getElementById( 'post-body-content' );
 			$postBodyContent = jQuery( postBodyContent );
+			nextFieldOrder = parseInt( $newFields[ 0 ].dataset.nextFieldOrder, 10 ) || 0;
 
 			if ( jQuery( '.frm_field_loading' ).length ) {
 				loadFieldId = jQuery( '.frm_field_loading' ).first().attr( 'id' );