ColorPicker: GUI elements are not moved to selected color

[wlhUser]

Describe the bug

In the colorPicker widget there are markers showing the selected color or hue. However these markers are not moved on selecting colors - one always stay in the upper left corner of the color selection box, while the other stays always on top of the hue selector.

It is only a minor bug, but users may get confused by the behavior.

Reproducer

For reproducing please have a look at the official online demo.
Just move the mouse in the color selector boy, and check if the little circle on the top left corner follows.
Try the same in the hue selector and check if the arrows on the top follow.
https://www.primefaces.org/showcase/ui/input/colorPicker.xhtml

Expected behavior

Should behave like the colorPicker of PrimeNg

https://www.primefaces.org/primeng/colorpicker

PrimeFaces edition

Community

PrimeFaces version

12.0.1 11.0.8

Theme

No response

JSF implementation

All

JSF version

2.3

Java version

8,11

Browser(s)

Firefox 106, Edge 107, Chrome 107

[melloware]

The original Jquery ColorPicker has not been updated in years and has some bugs. We have this open ticket: #8000

[wlhUser]

Have debugged the JS code and found that probably some casts to String are the problem. After removing them the colorPicker works as expected. The code is a bit ugly, as the JS-file is a compressed one. I attach both the corrected and the original one for an easier comparison. Needed to rename to *.txt, as otherwise I cannot attache the files.
-> primefaces-12.0.1.jar\META-INF\resources\primefaces\colorpicker\colorpicker.js

colorpicker_new.js.txt
colorpicker_orig.js.txt

[melloware]

Take a look at my PR.

[melloware]

Thanks for tracking this down!

[melloware]

@wlhUser thought you would be interested in this: #9797

[wlhUser]

@melloware Wow, looks great. Thanks for the notification.