Settings API: support live_update_field_options for repeater titles

Render the mapped option label (instead of the raw value) for select and
TomSelect-enhanced repeater fields, both server-side and via JS. Adds a
new optional repeater arg live_update_field_options and listens for
input+change events so selects update the title live.

Author: ajaydsouza

includes/admin/settings/class-settings-form.php

@@ -999,9 +999,10 @@ public function callback_repeater( $args ) {
 		$class      = $this->get_field_class( $args );
 		$attributes = $this->get_boolean_attributes( $args ) . $this->build_field_attributes( $args );
 
-		$data_index        = (string) count( $value );
-		$live_update_field = ! empty( $args['live_update_field'] ) ? $args['live_update_field'] : 'name';
-		$fallback_title    = ! empty( $args['new_item_text'] ) ? $args['new_item_text'] : $this->translation_strings['repeater_new_item'];
+		$data_index          = (string) count( $value );
+		$live_update_field   = ! empty( $args['live_update_field'] ) ? $args['live_update_field'] : 'name';
+		$fallback_title      = ! empty( $args['new_item_text'] ) ? $args['new_item_text'] : $this->translation_strings['repeater_new_item'];
+		$live_update_options = ! empty( $args['live_update_field_options'] ) && is_array( $args['live_update_field_options'] ) ? $args['live_update_field_options'] : array();
 
 		ob_start();
 		?>
@@ -1010,6 +1011,9 @@ public function callback_repeater( $args ) {
 			data-index="<?php echo esc_attr( $data_index ); ?>"
 			data-live-update-field="<?php echo esc_attr( $live_update_field ); ?>"
 			data-fallback-title="<?php echo esc_attr( $fallback_title ); ?>"
+			<?php if ( ! empty( $live_update_options ) ) : ?>
+			data-live-update-field-options="<?php echo esc_attr( wp_json_encode( $live_update_options ) ); ?>"
+			<?php endif; ?>
 			<?php echo $attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
 
 			<div class="<?php echo esc_attr( $args['id'] ); ?>-items wz-repeater-items">
@@ -1069,9 +1073,14 @@ public function render_repeater_item( $args, $index, $item = null ) {
 			<input type="hidden" name="<?php echo esc_attr( $this->settings_key ); ?>[<?php echo esc_attr( $args['id'] ); ?>][<?php echo esc_attr( $index ); ?>][row_id]" value="<?php echo esc_attr( $item_id ); ?>" />
 			<div class="repeater-item-header">
 			<?php
-			$display_field = ! empty( $args['live_update_field'] ) ? $args['live_update_field'] : 'name';
+			$display_field  = ! empty( $args['live_update_field'] ) ? $args['live_update_field'] : 'name';
+			$live_options   = ! empty( $args['live_update_field_options'] ) && is_array( $args['live_update_field_options'] ) ? $args['live_update_field_options'] : array();
+			$raw_live_value = ! empty( $item['fields'][ $display_field ] ) ? (string) $item['fields'][ $display_field ] : '';
+			$display_value  = '' !== $raw_live_value
+				? ( isset( $live_options[ $raw_live_value ] ) ? $live_options[ $raw_live_value ] : $raw_live_value )
+				: $fallback_title;
 			?>
-			<span class="repeater-title"><?php echo esc_html( ! empty( $item['fields'][ $display_field ] ) ? $item['fields'][ $display_field ] : $fallback_title ); ?></span>
+			<span class="repeater-title"><?php echo esc_html( $display_value ); ?></span>
 			<span class="toggle-icon">▼</span>
 		</div>
 		<div class="repeater-item-content" style="display: none;">

includes/admin/settings/js/settings-admin-scripts.js

@@ -64,6 +64,7 @@ jQuery(document).ready(function ($) {
 		var index = parseInt(wrapper.data('index'), 10) || 0;
 		var liveUpdateField = wrapper.data('live-update-field') || 'name';
 		var fallbackTitle = wrapper.data('fallback-title') || '';
+		var liveUpdateOptions = wrapper.data('live-update-field-options') || {};
 
 		function reindexItems() {
 			itemsContainer.find('.wz-repeater-item').each(function (idx) {
@@ -139,11 +140,22 @@ jQuery(document).ready(function ($) {
 		});
 
 		// Live update repeater title when the specified field changes.
-		wrapper.on('input', '.wz-repeater-item :input[name$="[fields][' + liveUpdateField + ']"]', function () {
-			var $this = $(this);
-			var newName = $this.val();
-			var $repeaterTitle = $this.closest('.wz-repeater-item').find('.repeater-title');
-			$repeaterTitle.text(newName || fallbackTitle);
+		// Handles text inputs (input event), selects (change event, uses option text),
+		// and TomSelect-enhanced inputs (change event, uses displayed text or value).
+		function updateRepeaterTitle($field) {
+			var newName;
+			var val = $field.val();
+			if ($field.is('select')) {
+				// Ignore placeholder options (empty value).
+				newName = val ? $field.find('option:selected').text().trim() : '';
+			} else {
+				newName = val ? (liveUpdateOptions[val] || val) : '';
+			}
+			$field.closest('.wz-repeater-item').find('.repeater-title').text(newName || fallbackTitle);
+		}
+
+		wrapper.on('input change', '.wz-repeater-item :input[name$="[fields][' + liveUpdateField + ']"]', function () {
+			updateRepeaterTitle($(this));
 		});
 	});