WordPress.org

Make WordPress Core

#38091 closed defect (bug) (fixed)

Shortcut to collapse current control/section/panel is triggered when it shouldn't be

Reported by: westonruter Owned by: celloexpressions
Milestone: 4.7 Priority: normal
Severity: normal Version: 4.6
Component: Customize Keywords: has-patch needs-testing
Focuses: Cc:

Description (last modified by westonruter)

In #22237 a keyboard shortcut ESC was added to collapse the currently-expanded control, section, or panel. This feature turns out to exhibit some unexpected behaviors when attempting to use the ESC key to collapse the a ThemesSection modal, where closing the modal with ESC also causes the themes section to collapse unexpectedly, before then re-expanding to focus on the theme control.

Also for the color picker, I expected that hitting ESC would close the color picker, but instead it causes the entire section to collapse, not just the color picker.

Lastly, if there are any custom modal dialogs or other elements (like TinyMCE toolbars) that don't trap the ESC keydown event, hitting ESC will not only cause the modal/toolbar to close but also collapse the current control or section.

Attachments (2)

38091.0.diff (1.9 KB) - added by westonruter 11 months ago.
38091.1.diff (2.3 KB) - added by westonruter 10 months ago.

Download all attachments as: .zip

Change History (19)

#1 @westonruter
11 months ago

  • Owner set to westonruter
  • Status changed from new to accepted

#2 @westonruter
11 months ago

  • Description modified (diff)
  • Keywords has-patch added

In 38091.0.diff:

  • On keydown events for ESC that reach the body, abort if the target element not the body and is not inside of #customize-controls. Such events are being triggered on modals and other such elements that are not inside of the customizer controls and so they should not cause the current control/section/panel to collapse.
  • Let ThemesSection listen for keydown instead of keyup, and let it listen to events on the section container instead of the body. Ensure that the keydown event for ESC has its propagation stopped so that the themes section is not then collapsed.
  • Improve color picker by adding support to close the picker when the ESC key is pressed. When closing the picker, the focus is then added to the link that opens the picker. When ESC is pressed again, then the section is collapsed.

This is a defect in a new feature added in 4.6 so it could be part of 4.6.2

#3 @westonruter
11 months ago

  • Owner changed from westonruter to celloexpressions
  • Status changed from accepted to assigned

@celloexpressions As this relates to the themes section, please review and confirm whether you think this fix is warranted for 4.6.2.

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


11 months ago

#5 @celloexpressions
11 months ago

  • Milestone changed from 4.6.2 to 4.7
  • Owner changed from celloexpressions to westonruter

While this is a defect, it could also be considered an enhancement in some aspects, and represents a fairly large change for a minor release. There also haven't been any reports of this in the wild, which would indicate that no one knows that this feature is now available. That means that anyone testing a minor release beta would be unlikely to test that, making the potential for additional or newly-introduced breakage to occur. For those reasons, I think we should target 4.7 for these changes.

I actually just fixed this for the new themes section in the latest patch on #37661 on Saturday, and with the way that the modal there works (and collapsing a section will collapse the panel), 38091.0.diff will cause conflicts with the patch. Ideally, if we could revisit this after an initial commit on #37661, that'll be the easiest way to minimize reworking things.

This ticket was mentioned in Slack in #core by stevenkword. View the logs.


11 months ago

#7 @jorbin
11 months ago

  • Keywords needs-testing added

Some extra eyes on this patch and testing would be good.

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


11 months ago

This ticket was mentioned in Slack in #core-customize by desrosj. View the logs.


11 months ago

#10 @desrosj
11 months ago

Tested the first two items on the patch successfully. I can't find any examples of TinyMCE toolbars to test the last item though.

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


10 months ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


10 months ago

#13 @celloexpressions
10 months ago

  • Keywords needs-refresh added

This almost certainly needs to be refreshed to account for the related changes in #37661. At a minimum it needs a fresh round of testing.

#14 @westonruter
10 months ago

  • Keywords needs-refresh removed
  • Owner changed from westonruter to celloexpressions
  • Status changed from assigned to reviewing

Patch refreshed.

#15 @westonruter
10 months ago

@celloexpressions @desrosj can you please test the latest patch? I want to commit today for Beta2.

This ticket was mentioned in Slack in #core-customize by westonruter. View the logs.


10 months ago

#17 @westonruter
10 months ago

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

In 39120:

Customize: Prevent collapsing expanded panel/section/control when Esc is pressed on another closable UI element.

Prevents collapsing constructs when hitting Esc on a TinyMCE toolbar, lightbox, or expanded color picker.

See #22237.
Fixes #38091.

Note: See TracTickets for help on using tickets.