Overview

When using the preview mode with code components, the navigation prevention mechanism doesn't always work as expected.

Steps to reproduce:

  1. Open the preview that contains one or more code components.
  2. Attempt to navigate away (e.g., by clicking a link inside a code component).
  3. Observe that in some instances, the navigation prevention doesn't, navigating to a different page inside the preview.

Proposed resolution

User interface changes

CommentFileSizeAuthor
CleanShot 2025-03-20 at 19.26.04.gif611.44 KBlauriii

Issue fork experience_builder-3514481

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

lauriii created an issue. See original summary.

sea2709’s picture

sea2709 commented
Assigned: Unassigned » sea2709

Assign this one to myself. I think the issue is the preview area is rendered by an iframe, and when users click on links in iframe, by default, it refreshes the page, I'm thinking about adding a base tag in the preview iframe will make the link to be opened on the parent window.

sea2709 opened merge request !893

sea2709’s picture

sea2709 commented
Assigned: sea2709 » Unassigned
Status: Active » Needs review

@lauriii: When you have a chance, can you review my MR? I see that the cypress E2E job is fail because of 2 failed test cases in component-operations.cy.js. I don't know if it's an on-going issue or it's related to my changes.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Component: Page builder » Theme builder
Assigned: Unassigned » balintbrews
Issue tags: +stable blocker

e2e tests should be more reliable now. Queued a new run for you.

I'll let the lead for code components review this, thanks, @sea2709! 😄

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Component: Theme builder » Page builder
Assigned: balintbrews » Unassigned

Note that this is not the same as #3515615: Prevent navigation in code component editor preview:

Also: fixing the issue queue component; I was wrong in #5.

jessebaker’s picture

jessebaker commented
Assigned: Unassigned » lauriii

@lauriii Do you think this is a speed/race condition situation? It seems like, in the gif, the issue occurs when quickly clicking the link immediately after refreshing the browser? Do you think that's the reason why it's only happening "in some instances".

For clarity the way the link interception works is that there is a drupal behaviour loaded in the page when it's in the preview that preventsDefault on the click event and uses a postmessage to communicate up to the parent of the iFrame (our React app).

My suspicion is that some kind of race condition either means you are able to click the link before the event handler has been bound to the link OR the event handler is not getting bound to the link as a result of it running before the link is rendered on the page (by Astro).

jessebaker’s picture

jessebaker commented
Status: Needs review » Postponed (maintainer needs more info)

Marking as postponed pending a bit more info as I am unable to reproduce.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented

#3515615: Prevent navigation in code component editor preview just landed btw, so I want to emphasize how this is not that — see #6.

effulgentsia’s picture

effulgentsia commented
Assigned: lauriii » Unassigned
Status: Postponed (maintainer needs more info) » Closed (duplicate)
Related issues: +#3535072: Drupal.behaviors.xbDisableLinks doesn't disable links added to the DOM later

Closing this as a duplicate of #3535072: Drupal.behaviors.xbDisableLinks doesn't disable links added to the DOM later.