wpColorPicker Shows Twice When First Added to Sidebar

[BookWookie]

When using the wpColorPicker in a widget, the first time the Widget is added to the sidebar, the color picker shows twice. Only one of the pickers is functional. After saving, only one color picker is shown and everything is fine.

I found a similar ticket here - #23293. That ticket was marked as invalid, but I think this issue needs to be revisited, as the documented solution does not work.

Here's the code I've tried adding inside of the widget's form function and the corresponding results:

<script>
    jQuery(document).ready(function($) {
        $(document).ajaxComplete(function() {
            $('.color-picker').wpColorPicker();
        });
    });
</script>

The above shows two color pickers in the widget's settings, only one of which is functional.

<script>
    jQuery(document).ready(function($) {
        $('.color-picker').wpColorPicker();
    });
</script>

The above shows two color pickers in the widget's settings, only one of which is functional.

<script>
    jQuery(document).ready(function($) {
        jQuery("#widgets-right .widgets-sortables").on("sortstop", function(event, ui) {
            jQuery(".color-picker").wpColorPicker();
        });
    });
</script>

The above shows two color pickers in the widget's settings, none of which work.

I've tried downloading third party plugins to see how they do it, and they suffer from the same duplicate color picker issue.

[BookWookie]

Main Plugin File

[ocean90]

Hello BookWookie, thanks for you report and sorry you haven't got an answer yet.

Yes, it's really painful to find the correct event to make this work. I currently seeing a similar issue when using ​Choosen in a widget and haven't a solution yet.

A JS action would be helpful here, see #19675/#21170.

[jmlapam]

Hi,

Is there any fix for this in 3.9? I agree it's really painful.

[ocean90]

Demo plugin

[ocean90]

Attached a demo plugin, see color-picker-widget.php​, which adds a widget with two color fields. It uses the new jQuery events, see #19675.