Automattic / Automattic/Iris

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

Open
#55 2 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
259
Forks
67
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the reported sequence in the Iris color picker: clear the field, select a palette or chart color once, then select another color. Trace the wpColorPicker change callback and the color-selection event flow, using the provided integration code as the expected consumer. Done means the callback fires on the first selection and reports the newly selected color, so the opacity field and live preview update immediately.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.