WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 3 weeks ago

#26005 closed defect (bug) (fixed)

Internal jump links and shift-clicking on links in widgets (to edit) erroneously cause navigation in Customizer preview

Reported by: afercia Owned by: MattGeri
Milestone: 4.5 Priority: normal
Severity: normal Version: 3.4
Component: Customize Keywords: has-patch
Focuses: javascript Cc:

Description

thx to this answer by Otto, I finally got the reason of some weirdness in the customizer preview.
About this line:
this.body.on( 'click.preview', 'a', function( event ) ...
the problem here is that selecting 'a' is a bit too generic and it will affect also "in-page links", causing a POST request and then some ajax voodoo even when the link is an in-page anchor.
Just two examples:

jQuery UI tabs use in page anchors with an href like:
href="#tabs-1"
href="#tabs-2"

many developers use a href="#" and then jQuery preventDefault(); to reveal/hide content, effects, whatever...

Say you're in the customizer preview in some *internal* page of your site, then you click on a link with href="#" and... you get the homepage.
That's because the actual link will be interpreted as http://yoursite.com/# and the POST request will be triggered even if you use jQuery preventDefault();
Using return false; instead of jQuery preventDefault(); seems to work (because return false; does something more than
preventDefault();) btw using href=#" and jQuery preventDefault(); is quite a common practice (and best practice).

Or try to build some jQuery UI tabs in a page, then preview that page in the customizer and click on a tab. On twentythirteen I've got the whole home page loaded *inside* the tab content :-)

Maybe it would be better to don't select all the links in the page and change this line:
this.body.on( 'click.preview', 'a', function( event ) {
to say "select all links with an href attribute which doesn't start with #".

As a side note, the "edit link" doesn't work in the customizer preview but I can understand it would be a bit tricky to find a safe solution.
thx very much
Andrea

Attachments (1)

26005.diff (1014 bytes) - added by westonruter 3 weeks ago.

Download all attachments as: .zip

Change History (9)

#1 @afercia
2 years ago

integration:
one more test case would be:

<a href="#">Back to top</a>

with some jQuery smooth scrolling, I can't count how many themes use that and that won't work in the customizer preview, will trigger a request for the home page.

Btw there also links that *contain* an hash for example:
http://yoursite.com/yourpage/#comments
when you're already on the single post that triggers a POST request which reloads the page, this should be avoided. But if you're in an archive page things are different and the request should take place.
Btw, for the simpler case, I've tested with

"a:not([href*='#'])"

and seeems to work.

#2 @SergeyBiryukov
2 years ago

  • Component changed from Administration to Appearance
  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed
  • Version changed from 3.7.1 to 3.4

Duplicate of #23225 and #24032.

#3 @westonruter
3 weeks ago

  • Milestone set to 4.5
  • Resolution duplicate deleted
  • Status changed from closed to reopened
  • Summary changed from customize-preview.js and in-page anchors to Internal jump links and shift-clicking on links in widgets (to edit) erroneously cause navigation in Customizer preview

This issue is actually not a duplicate of #23225 or #24032. Internal jump links and shift-clicking on links in widgets (to edit) erroneously cause navigation in Customizer preview. I initially put together a workaround for the jump links in http://wordpress.stackexchange.com/q/214937/8521

@westonruter
3 weeks ago

#4 @westonruter
3 weeks ago

  • Focuses javascript added
  • Keywords has-patch added

#5 @westonruter
3 weeks ago

26005.diff fixes three things:

  • Only listen for clicks on links that have href attributes.
  • Prevent following links clicked in the Customizer if shift key is pressed when clicking; this fixes an issue when trying to shift-click on a widget or nav menu item (#32681) to focus on the control in the Customizer.
  • Prevent following jump links (starting with #), but instead scroll that element into view.

Note that the logic here will likely be removed once transactions (#30937) and the natural URL is loaded into the iframe (#30028).

#6 @westonruter
3 weeks ago

  • Owner set to MattGeri
  • Status changed from reopened to reviewing

Assigning for review to test with nav menu item control focus patch (#32681).

#7 @MattGeri
3 weeks ago

This works great with my code for #32681

#8 @westonruter
3 weeks ago

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

In 36371:

Customizer: Fix click.preview event handler for jump links and shift+clicks in preview.

  • Prevent following jump links (starting with #), but instead scroll that element into view.
  • Prevent following links clicked in the Customizer if shift key is pressed when clicking; this fixes an issue when trying to shift-click on a widget or nav menu item (#32681) to just focus on the control in the Customizer.

Fixes #26005.

Note: See TracTickets for help on using tickets.