Overview

When you click "Preview" in XB, you can see a preview of the page you're building, without the XB sidebars and canvas overlay, so you can click on the page's interactive elements. However, we disable clicking links to navigate away from the page entirely. We do this with Drupal.behaviors.xbDisableLinks.

However, Drupal behaviors only run after the page is initially loaded, and after Drupal AJAX operations complete. Drupal behaviors don't run when, for example, React components that are on the page re-render in response to a state change, such as when using the Navigation component in #3530958: Build a navigation code component.

Proposed resolution

Change xbDisableLinks from a Drupal behavior to a mutation observer (or any other technique for monitoring links that get added to the DOM). Or, keep the Drupal behavior but also add a mutation observer for catching subsequent links added outside of Drupal's AJAX operations.

User interface changes

Issue fork experience_builder-3535072

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

effulgentsia created an issue. See original summary.

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
Assigned: Unassigned » balintbrews
mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented

I think I hit this with a "simpler" scenario. I have a button link component within the slot of a another component. The page is then visited within the iframe. The problem does not occur if the button link is on its own and not in a slot.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented

Oh, and this effects anything using dynamic code components – menus for example.

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
Assigned: balintbrews » Unassigned

Unassigning as I'm not working on this right now, in case anyone would pick it up.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented
Assigned: Unassigned » mglaman

I've got a MutationObserver working, making MR shortly

mglaman opened merge request !1364

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented
Status: Active » Needs review

jessebaker made their first commit to this issue’s fork.

jessebaker opened merge request !1371

effulgentsia’s picture

effulgentsia commented
Issue tags: +stable blocker

Closed #3514481: The navigation prevention inside the preview doesn't always work for code components as a duplicate of this. That one was tagged as a stable blocker, so transferring that tag to here.

bnjmnm made their first commit to this issue’s fork.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Related issues: +#3514481: The navigation prevention inside the preview doesn't always work for code components
bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Assigned: mglaman » jessebaker
Status: Needs review » Needs work
Issue tags: +Needs tests

I approved MR 1371 - it's a solid approach that doesn't require DOM vigilance. It's also more comprehensive as it covers keyboard interaction and submits. However, the issue is NR as this expanded functionality should probably get some e2e representation. You should be able to use the Cypress jQuery functionality to add a link to the preview iframe after it loads which would reproduce the scenario this fixes without having to deal with making a component do it.
jQuery('iframe[title="Page preview"]').contents().find("body").append(YOUR LINK[s] )

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented

Tested new patch, works great

jessebaker’s picture

jessebaker commented
Assigned: jessebaker » Unassigned
Status: Needs work » Needs review

Test, written in Playwright, has been added now. I took the opportunity to also migrate all but one of the tests in ui/tests/e2e/preview.cy.js. The remaining test is a bit more tricky so I've not attempted to migrate that here. I've renamed the file to ui/tests/e2e/vh-units.cy.js because it now specifically tests that one thing.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Assigned: Unassigned » bnjmnm
Issue tags: -Needs tests
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Version: 0.x-dev » 1.x-dev
bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Assigned: bnjmnm » Unassigned
Status: Needs review » Reviewed & tested by the community

The solution I was already happy with, and the new tests look good 👍,.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Issue tags: -beta target, -stable blocker

  • jessebaker committed c0330f10 on 1.x 
    Issue #3535072 by jessebaker, bnjmnm, mglaman: Drupal.behaviors....
jessebaker’s picture

jessebaker commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.