WP Color Picker change event

The color picker used as a theme setting seems to be ok. The issue is when it’s used as a widget setting. I’ve put together a quick plugin to illustrate the issue. Try running this widget in the customizer:

<?php
/*
Plugin Name: ColorTest
Description: color picker test for WP 3.9
*/

class ColorTest extends WP_Widget {

	function __construct() {
		parent::__construct('color-test', 'Color Test', array());
	}

	public function widget($args, $instance) {

		extract($args);
		$instance = wp_parse_args($instance, array('color'=>'#000000', 'text'=>'Lorem ipsum'));

		echo $before_widget;
		echo $before_title . 'Color Test' . $after_title;
		echo '<p style="color: ' . $instance['color'] . '; font-weight: bold;">' . $instance['text'] . '</p>';
		echo $after_widget;

	}

	public function update($new_instance, $old_instance) {

		$instance = array();
		$instance['color'] = $new_instance['color'];
		$instance['text'] = $new_instance['text'];
		return $instance;

	}

	public function form($instance) {

		$instance = wp_parse_args($instance, array('color'=>'#000000', 'text'=>'Lorem ipsum'));

		wp_enqueue_script('wp-color-picker');
		wp_enqueue_style('wp-color-picker');
		?>
		<p>
		<label>Text Color</label>
		<input type="text" class="color-field" id="<?php echo $this->get_field_id('color'); ?>" name="<?php echo $this->get_field_name('color'); ?>" value="<?php echo esc_attr($instance['color']); ?>" />
		</p>
		<p>
		<label>Text Content</label>
		<input type="text" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>" value="<?php echo esc_attr($instance['text']); ?>" />
		</p>
		<script type="text/javascript">

		jQuery(document).ready(function($) {
			$('.control-section .color-field').wpColorPicker();
			$(document).on('widget-updated widget-synced widget-added', function() {
				$('.control-section .color-field').each(function() {
					if (!$(this).data('wpWpColorPicker')) $(this).wpColorPicker();
				});
			});
		});

		</script>
		<?php

	}

}

add_action('widgets_init', function() { register_widget('ColorTest'); });

Right, editing the text input field causes a preview refresh, but the color picker by itself does not trigger a javascript change event when the color is changed. I’m hoping the WP Core team can implement a fix for this before releasing 3.9

Perfect, thanks Dominik