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

[Looimaster]

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.

[westonruter]

@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.

[celloexpressions]

@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.

[westonruter]

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

[celloexpressions]

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

[westonruter]

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

[westonruter]

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

[westonruter]

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.