customizer multiple color pickers should close when you click outside of them

[afercia]

when you have multiple color pickers in the same customizer section, you easily end up with all color pickers "opened", see attached screenshot.
To reproduce, add 2-3 color pickers in the same section, then click several times randomly on the color pickers.
Seems related to some code in /wp-admin/js/color-picker.(min.)js
which should close a color picker when you click outside it but seems it doesn't correctly handle multiple color pickers.

[afercia]

multiple color pickers opened

[ocean90]

Hello afercia, thanks for the report.

I have tested this in Chrome and with the Twenty Fourteen theme which has two color pickers. I can reproduce this with these steps:

1. Open the Customizer
2. Click Select Color button for Site Title Color
3. Select a color and don't close the picker
4. Instead click Select Color for Background Color
5. You will notice that the previous color picker is closed now
6. Now select a color and don't close the picker
7. Instead click Select Color for Site Title Color again
8. You will notice that the previous color picker remains open

[afercia]

Hello Ocean,
followed your steps, 3 times, WordPress 3.8.1 and Twenty Fourteen and I get different results depending on the browser used, for example:

• Firefox 27: exactly same results as yours

• Chrome 31: (yes I'm still on 31) at steps 5 the previous color picker is still open for me.

Moreover, I tested with a theme with more than 2 color pickers, I would suggest you to do the same and you will notice some more weird behavior, for example color pickers may randomly be still open when you click *outside* of any color picker, clicking for example on the section description.
Sorry I can't help more.
Andrea

[mattwiebe]

I can't remember my reasoning at the time, but I think that I thought if you were dealing with multiple color pickers you might want to jump back and forth. But, if clicking off of a color picker closes it, it should behave that way universally, not with the special case of *except when clicking on another color picker.

Patch attached. In addition to fixing this bug, I cleaned up the file to fully conform to JS coding standards.

[ocean90]

In 28239:

Color Picker: Close color picker when clicking outside of them and when opening another one.

props mattwiebe.
fixes #25539.