WordPress.org

Make WordPress Core

Opened 22 months ago

Closed 9 months ago

#34142 closed defect (bug) (fixed)

Links with preventDefault() don't have action prevented in Customizer

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

Description

I have "menu" and "cart" icons in the menu (created via custom CSS classes in Appearance > Menus) which are empty links <a href="#" class="cart-icon">Cart</a> with default action prevented and replaced with custom JavaScript action (opening sidebar menu or showing cart overlay).

When these links are clicked in the Customizer then the page is reloaded. So, it's never possible to open the menu or cart by clicking on these icons.

Change History (9)

#1 @westonruter
22 months ago

  • Component changed from General to Customize
  • Focuses javascript added
  • Milestone changed from Awaiting Review to Future Release
  • Version changed from 4.3.1 to 3.4

@Looimaster Yes, this is a problem in the current state of the Customizer.

The Customizer code that is causing problems here for you is in customize-preview.js:

this.body = $( document.body );
this.body.on( 'click.preview', 'a', function( event ) {
        event.preventDefault();
        self.send( 'scroll', 0 );
        self.send( 'url', $(this).prop('href') );
});

So you can see that when you click a link, the Customizer will intercept that and try to navigate you to the URL in the link (even if it is just a link to '#', i.e. a page reload).

The quick workaround for you is to simply replace your a tag with something else, which would be better anyway since it is not a link. Try replacing what you have with:

<span tabindex="0" class="cart-icon">Cart</span>

This should have the desired effect.

The ultimate solution here will be to ensure the Customizer is compatible with your original code, however. This will ultimately be achieved when we can just use a natural URL inside the iframe as opposed to having to do Ajax POST requests to refresh the preview. See #30028 and #30937.

#2 @celloexpressions
15 months ago

  • Keywords close added

@westonruter do we need to keep this ticket open? I think the best solution on the theme side is to use semantic elements such as <button> for non-link links, since empty links are discouraged anyway.

Aside: the code noted above prevents content skiplinks from working (such as the table of contents links on developer.wordpress.org); in fact, they eventually redirect to the front page. Probably want a new ticket for that.

#3 @westonruter
15 months ago

  • Keywords close removed
  • Milestone changed from Future Release to 4.6

@celloexpressions let's keep it open and let it be a test case to the implementation of transactions.

#4 @celloexpressions
15 months ago

Sounds good, and that should also fix the additional bug I noted above.

#5 @westonruter
15 months ago

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

#6 @westonruter
14 months ago

  • Milestone changed from 4.6 to Future Release

Punting due to transactions being too large to finish patch and test in time for 4.6.

#7 @westonruter
10 months ago

  • Keywords has-patch needs-testing added
  • Milestone changed from Future Release to 4.7

This has been implemented in the patch for #30937.

Namely in https://github.com/xwp/wordpress-develop/pull/161/commits/ec779adca67a0a1f2787efe93716e401651bbc62

Please test: grunt patch:https://github.com/xwp/wordpress-develop/pull/161

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


9 months ago

#9 @westonruter
9 months ago

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

In 38810:

Customize: Implement customized state persistence with changesets.

Includes infrastructure developed in the Customize Snapshots feature plugin.

See https://make.wordpress.org/core/2016/10/12/customize-changesets-technical-design-decisions/

Props westonruter, valendesigns, utkarshpatel, stubgo, lgedeon, ocean90, ryankienstra, mihai2u, dlh, aaroncampbell, jonathanbardo, jorbin.
See #28721.
See #31089.
Fixes #30937.
Fixes #31517.
Fixes #30028.
Fixes #23225.
Fixes #34142.
Fixes #36485.

Note: See TracTickets for help on using tickets.