feat: Update field ID handling for conditional logic and improve data attributes across components

Author: novincode

admin/src/pages/FieldsetEditor/components/ConditionalLogicPanel.tsx

@@ -181,13 +181,13 @@ export function ConditionalLogicPanel({
 											<SelectTrigger className="w-[140px]">
 												<SelectValue placeholder="Select field" />
 											</SelectTrigger>
-											<SelectContent>
-												{otherFields.map((f) => (
-													<SelectItem key={f.id} value={f.name}>
-														{f.label}
-													</SelectItem>
-												))}
-											</SelectContent>
+										<SelectContent>
+											{otherFields.map((f) => (
+												<SelectItem key={f.id} value={f.id}>
+													{f.label}
+												</SelectItem>
+											))}
+										</SelectContent>
 										</Select>
 
 										{/* Operator selector */}

plugin/assets/admin/js/fields.js

@@ -566,17 +566,24 @@
 			return rules.every(rule => {
 				if (!rule || !rule.field) return true;
 
-				// Find the field element by name.
-				// Try multiple patterns since prefix may or may not be present.
-				const fieldName = rule.field;
-				const fieldElement = document.querySelector(
-					`[name="${fieldName}"], [name="${fieldName}[]"], ` +
-					`[name="openfields_${fieldName}"], [name="openfields_${fieldName}[]"], ` +
-					`[data-field="${fieldName}"], [id="${fieldName}"]`
-				);
+				// rule.field is now a FIELD ID (immutable UUID/identifier)
+				// Look for any field with data-field-id attribute matching this ID
+				// This works for: root fields, repeater subfields, group subfields, anywhere
+				const fieldId = rule.field;
+				let fieldElement = document.querySelector(`[data-field-id="${fieldId}"]`);
+				
+				// Fallback: try to find by field name (backwards compatibility)
+				if (!fieldElement) {
+					const fieldName = rule.field;
+					fieldElement = document.querySelector(
+						`[name="${fieldName}"], [name="${fieldName}[]"], ` +
+						`[name="openfields_${fieldName}"], [name="openfields_${fieldName}[]"], ` +
+						`[data-field="${fieldName}"], [id="${fieldName}"]`
+					);
+				}
 
 				if (!fieldElement) {
-					console.warn(`[OpenFields] Conditional field not found: ${fieldName}`);
+					console.warn(`[OpenFields] Conditional field not found: ${fieldId}`);
 					return true; // If field not found, don't block.
 				}
 

plugin/includes/admin/field-renderers/group.php

@@ -123,8 +123,12 @@ function openfields_render_group_subfield( $sub_field, $parent_name, $object_id,
 
 	?>
 	<div class="openfields-group-subfield openfields-field-wrapper openfields-field-wrapper--width-<?php echo intval( $wrapper_width ); ?><?php echo $wrapper_class ? ' ' . esc_attr( $wrapper_class ) : ''; ?>" 
-		style="width: <?php echo intval( $wrapper_width ); ?>%;"
+		style="--of-field-width: <?php echo intval( $wrapper_width ); ?>%;"
+		data-width="<?php echo intval( $wrapper_width ); ?>"
 		data-subfield-name="<?php echo esc_attr( $sub_field->name ); ?>"
+		<?php if ( ! empty( $sub_field->id ) ) : ?>
+			data-field-id="<?php echo esc_attr( $sub_field->id ); ?>"
+		<?php endif; ?>
 		<?php if ( $wrapper_id ) : ?>
 			id="<?php echo esc_attr( $wrapper_id ); ?>"
 		<?php endif; ?>

plugin/includes/admin/field-renderers/repeater.php

@@ -257,7 +257,12 @@ function openfields_render_repeater_subfield( $sub_field, $index, $base_name, $o
 
 	// Build style with CSS custom property - no inline PHP in attributes
 	$width_val = intval( $width );
-	echo '<div class="' . implode( ' ', array_map( 'esc_attr', $classes ) ) . '" style="--of-field-width: ' . $width_val . '%;" data-width="' . $width_val . '"' . $id_attr . '>';
+	$field_id_attr = '';
+	if ( ! empty( $sub_field->id ) ) {
+		$field_id_attr = ' data-field-id="' . esc_attr( $sub_field->id ) . '"';
+	}
+	
+	echo '<div class="' . implode( ' ', array_map( 'esc_attr', $classes ) ) . '" style="--of-field-width: ' . $width_val . '%;" data-width="' . $width_val . '"' . $id_attr . $field_id_attr . '>';
 
 	if ( ! empty( $sub_field->label ) ) {
 		echo '<label class="openfields-repeater-subfield-label" for="' . esc_attr( $field_id ) . '">';

plugin/includes/fields/class-openfields-field-wrapper.php

@@ -104,6 +104,11 @@ public function render() {
 		$html .= ' style="--of-field-width: ' . intval( $width ) . '%;"';
 		$html .= ' data-width="' . intval( $width ) . '"';
 
+		// Add unique field ID for conditional logic and form tracking.
+		if ( ! empty( $this->field->id ) ) {
+			$html .= ' data-field-id="' . esc_attr( $this->field->id ) . '"';
+		}
+
 		// Add data attributes for conditional logic if present.
 		$conditions = isset( $config['conditional_logic'] ) ? $config['conditional_logic'] : array();
 		if ( ! empty( $conditions ) ) {