Clicking palette color or any color on first click doesn't trigger change callback.

[Daniel L. Iser]

I am using this inside a plugin and have seen the following issue. Since iris doesn't do alpha channels I have a range input below for opacity. When there is no color selected I want to hide that field. Also on color change I update a live view of the element being styled.

Here is the code currently being used.

PUMColorPickers = {
    init: function () {
        $('.color-picker').filter(':not(.initialized)')
            .addClass('initialized')
            .wpColorPicker({
                change: function (e) {
                    var $input = $(e.currentTarget);
                    if ($input.hasClass('background-color')) {
                        $input.parents('table').find('.background-opacity').show();
                    }

                    $(this).trigger('change.update');

                    PopMakeAdmin.update_theme();
                },
                clear: function (e) {
                    var $input = $(e.currentTarget).prev();
                    if ($input.hasClass('background-color')) {
                        $input.parents('table').find('.background-opacity').hide();
                    }

                    $(this).prev('input').trigger('change.clear').wpColorPicker('close');

                    PopMakeAdmin.update_theme();
                }
            });
    }
};

As you can see it should show / hide the opacity input when a color is chosen or cleared. Here is how it is working / not working.

Click clear - Works perfect, field hides.

With clear field, open picker and click once(no drag) on the color chart - Updates the color fields value, but does not trigger the change callback function or hide the opacity input. Also the theme update isn't triggered.

With clear field, open picker and click any paletted color - Same result as above. Color field shows new value but change event never fires.

With existing color, single click any color on palette or color chart(no drag) - Same as above, but if you click a second color in the palette, then the change callback is fired, but not for the newly selected color, but rather the last one picked. You always have to double click in order to update the opacity field and rerender the theme.

EX of that.
Current color: #fffffff
Open iris, click the red color palette. Field updates to red hex code, but the live preview still shows white.
Now click yellow in the palette and the field updates to yellow, but the live preview now shows red.

I have tried everything from using _.throttle and _.debounce to setting a timeout on the theme update and show/hide function, nothing seems to fix this glitch for me or my users. Been there since v1.0 of Popup Maker even though I have rewritten that entire section of JS multiple times over the last 16 months.

[Theodore Nastos]

@danieliser
Or for anyone that may be having the same issue.
Had the same problem with the wp-color-picker and solved it by setting a 1 ms timeout inside the color-picker change function.

let cpOptions = {
    change: function(event, ui) {
        setTimeout(function(){
           //code you want to execute
        },1);
    }
};

$('.color-picker').wpColorPicker(cpOptions);

It seems that the code inside the change function is executed before the value of the colorpicker is changed in the input.It's only a problem when you try to make changes live and only with the pallete colors.

[Chris Allen]

@danieliser still helpful 7 years later :D