WordPress.org

Make WordPress Core

#25539 closed defect (bug) (fixed)

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

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

Description

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 17 months ago.
multiple color pickers opened
25539.diff (5.4 KB) - added by mattwiebe 12 months ago.

Download all attachments as: .zip

Change History (10)

@afercia17 months ago

multiple color pickers opened

comment:1 @nacin13 months ago

  • Component changed from Administration to Appearance
  • Focuses administration added

comment:2 @ircbot12 months ago

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

comment:3 follow-up: @ocean9012 months 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

comment:4 in reply to: ↑ 3 @afercia12 months 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.
Andrea

@mattwiebe12 months ago

comment:5 @mattwiebe12 months 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.

comment:6 @SergeyBiryukov12 months ago

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

comment:7 @ocean9010 months ago

  • Milestone changed from Future Release to 4.0

comment:8 @ocean9010 months 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.