Primeng: Color picker background color is dependent on the currently selected color not the current hue

Created on 14 Nov 2017  路  4Comments  路  Source: primefaces/primeng

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[X ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
No need for a plunkr, issue is present on color picker documentation:
https://www.primefaces.org/primeng/#/colorpicker

Current behavior
The color selector background-color is dependent on the currently selected color instead of the currently selected hue. This is most evident when the color bubble is on the left side of the color selector. This results in the color selector showing false values:
image

Expected behavior
The color selector's background color should always be dependent on the color value in the hue selector.
image

Minimal reproduction of the problem with instructions
Go to the documentation site for the color picker https://www.primefaces.org/primeng/#/colorpicker
Move the color selector "bubble" to the left side of the color selector.
Change the hue selector.
Notice the color selector is now primarily greyscale.
If you then change the bubble again, it selects the correct color, not what is shown in the selector.

What is the motivation / use case for changing the behavior?
The color selector bubble should always show the same color spectrum if the hue slider has not changed.

  • Browser:
    Tested in Chrome, FireFox, Edge - Windows 10
defect

Most helpful comment

It's a very easy fix but I don't have the time to create a pull request for it. This is how to fix it:

updateColorSelector () {
let bgValue = {};
bgValue.s = 100;
bgValue.b = 100;
bgValue.h = this.value.h;
this.colorSelectorViewChild.nativeElement.style.backgroundColor = '#' + this.HSBtoHEX(bgValue);
};

All 4 comments

It's a very easy fix but I don't have the time to create a pull request for it. This is how to fix it:

updateColorSelector () {
let bgValue = {};
bgValue.s = 100;
bgValue.b = 100;
bgValue.h = this.value.h;
this.colorSelectorViewChild.nativeElement.style.backgroundColor = '#' + this.HSBtoHEX(bgValue);
};

@cagataycivici @Merve7 any chance to see this fixed? It's been some time... 馃槥

bump

the @DavyDeDurpel solution works great!
the problem persists in version 6.0.0-alpha.1 @cagataycivici

Was this page helpful?
0 / 5 - 0 ratings