Make WordPress Core

Opened 11 years ago

Closed 10 years ago

#25539 closed defect (bug) (fixed)

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

Reported by: afercia's profile afercia Owned by: ocean90's profile ocean90
Milestone: 4.0 Priority: normal
Severity: minor Version: 3.6.1
Component: Customize Keywords: has-patch 4.0-early
Focuses: administration Cc:


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.

Attachments (2)

multiple-color-pickers.png (108.0 KB) - added by afercia 11 years ago.
multiple color pickers opened
25539.diff (5.4 KB) - added by mattwiebe 10 years ago.

Download all attachments as: .zip

Change History (10)

11 years ago

multiple color pickers opened

#1 @nacin
10 years ago

  • Component changed from Administration to Appearance
  • Focuses administration added

This ticket was mentioned in IRC in #wordpress-dev by ocean90. View the logs.

10 years ago

#3 follow-up: @ocean90
10 years ago

  • Keywords needs-patch added

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

#4 in reply to: ↑ 3 @afercia
10 years ago

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.

10 years ago

#5 @mattwiebe
10 years ago

  • Keywords has-patch added; needs-patch removed

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.

#6 @SergeyBiryukov
10 years ago

  • Keywords 4.0-early added
  • Milestone changed from Awaiting Review to Future Release

#7 @ocean90
10 years ago

  • Milestone changed from Future Release to 4.0

#8 @ocean90
10 years ago

  • Owner set to ocean90
  • Resolution set to fixed
  • Status changed from new to closed

In 28239:

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

props mattwiebe.
fixes #25539.

Note: See TracTickets for help on using tickets.