Make WordPress Core

Opened 7 years ago

Closed 7 years ago

#31457 closed enhancement (fixed)

Press This: Close sidebar when cursor clicks out of sidebar or tab focus leaves sidebar

Reported by: Michael Arestad Owned by: azaozz
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.2
Component: Press This Keywords: has-patch
Focuses: ui, javascript Cc:


The sidebar should probably close when clicking out of it or when it no longer has focus. (note, the sidebar visibility is only toggle-able on smaller viewports)

Attachments (2)

31457.patch (807 bytes) - added by abhishekfdd 7 years ago.
Patch to fix the issue
31457.2.patch (8.4 KB) - added by azaozz 7 years ago.

Download all attachments as: .zip

Change History (10)

#1 @Michael Arestad
7 years ago

  • Focuses ui javascript added

#2 @SergeyBiryukov
7 years ago

  • Milestone changed from Awaiting Review to 4.2

7 years ago

Patch to fix the issue

#3 follow-up: @abhishekfdd
7 years ago

  • Keywords has-patch added

I bound a function to remove wp-responsive-open class on touchstart and click to #wpbody-content for hiding the menu.

#4 in reply to: ↑ 3 @stephdau
7 years ago

Replying to abhishekfdd:

I bound a function to remove wp-responsive-open class on touchstart and click to #wpbody-content for hiding the menu.

Unless I missed something, this patch is for wp-admin's sidebar, not Press This' sidebar, which is the target of this ticket.

On the other hand, I tried to inspire myself from it, and tried to detect clicks on the body, and their target element. Unfortunately, the issue we're having is that if the user happens to put the cursor inside the TinyMCE content iframe when clicking out of the sidebar, the local body click is not being registered, as it's happening inside that iframe's body instead... :(

We might have to wrap options-panel in a wrapper that'd take 100% of the width and height when the sidebar is expanded, and detect clicks on there, with event.target == self or not, to slide it back. This would have to only be the case if we're in responsive mode, since the sidebar is fixed if the window width is wide enough.

@azaozz, @michaelarestad: alternative ideas/suggestions?

Version 0, edited 7 years ago by stephdau (next)

#5 @Michael Arestad
7 years ago

I mentioned an initial idea in slack involving another div: https://wordpress.slack.com/archives/feature-pressthis/p1425401216000571

Another thing we could try (instead of a fill-width wrapper on options panel which would wreck the layout), is a pseudo-element on options-panel.

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

7 years ago

7 years ago

#7 @azaozz
7 years ago

In 31457.2.patch:

  • Close the sidebar on moving the focus outside of it (by clicking or by "tabbing").
  • Clean up the JS a bit, use vars where possible.

Based on using .focusout and looking at the next focused element (.document.activeElement).

While working on it found a "strange" bug: when the sidebar is open, clicking on the background actually lets the clicks go through. Also hovering over TinyMCE buttons triggers the tooltips for them.

Caused by using box-shadow to stretch the element only visually. The actual element has 0 height. Used a "backdrop" to fix that and make clicking under the tags in an open sidebar work as expected.

#8 @azaozz
7 years ago

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

In 31651:


  • Close the sidebar on moving the focus outside of it (by clicking or by "tabbing").
  • Fix a (weird) structural CSS problem where clicks go through the sidebar when it is open.
  • Clean up the JS a bit.

Fixes #31457.

Note: See TracTickets for help on using tickets.