Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#47693 closed defect (bug) (fixed)

customizer Color picker should get closed when click on color picker area.

Reported by: monikarao's profile monikarao Owned by: afercia's profile afercia
Milestone: 5.2.3 Priority: normal
Severity: normal Version: 4.9
Component: Customize Keywords: has-patch has-screenshots needs-testing fixed-major
Focuses: accessibility, administration Cc:


Right now color picker is getting closed on outer click but it doesn't get close when clicking on color picker area.

To Reproduce open Color Picker then click on the right side of the picker. It will not close.


Attachments (2)

color picker container.png (49.1 KB) - added by afercia 5 years ago.
47693.diff (350 bytes) - added by afercia 5 years ago.

Download all attachments as: .zip

Change History (12)

#1 @Hareesh Pillai
5 years ago

  • Focuses accessibility javascript administration added

#2 @SergeyBiryukov
5 years ago

  • Component changed from General to Customize

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

5 years ago

#4 @afercia
5 years ago

Discussed during today's weekly accessibility bug-scrub. Though not strictly related to accessibility, this appears as something to fix. To clarify, clicking on the area highlighted in blue in the screenshot below doesn't close the color picker.

5 years ago

#5 @afercia
5 years ago

  • Focuses javascript removed
  • Keywords has-patch has-screenshots added; needs-patch removed
  • Milestone changed from Awaiting Review to 5.3
  • Owner set to afercia
  • Version changed from 5.2.2 to 4.9

There's some JavaScript to avoid the color picker closes when clicking within its container so this part is necessary.

However, the container shouldn't extend on the right edge. Instead, it should adapt its width to the color picker actual width. This appears to happen because of a typo introduced in [41329]: there's no element with a CSS class wp-picker-containers (note the s at the end). The selector in the color-picker.css stylesheet should be wp-picker-container so to apply display: inline-block; to the container.

47693.diff solves the problem for the area on the right. I'd tend to think clicking the area at the top (between the buttons / input field and the color picker) should still not close the picker. There's a very high chance for unintentional clicks on that crowded UI section and preventing inaccurate clicks from closing the picker seems the best option.

#6 @afercia
5 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 45722:

Customize: Make the color picker close when clicking on the empty area on the right.

Props monikarao.
Fixes #47693.

#7 @monikarao
5 years ago

Thanks @afercia for resolving the problem.

#8 @afercia
5 years ago

Thank you @monikarao for catching this!

#9 @JeffPaul
5 years ago

  • Keywords needs-testing fixed-major added
  • Milestone changed from 5.3 to 5.2.3
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening this so it can be back-ported to the 5.2 branch, also needs testing to validate if this ticket is good to land in 5.2.3.

#10 @SergeyBiryukov
5 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 45843:

Customize: Make the color picker close when clicking on the empty area on the right.

Props monikarao, afercia.
Merges [45722] to the 5.2 branch.
Fixes #47693.

Note: See TracTickets for help on using tickets.