The navigation prevention inside the preview doesn't always work for code components

Created on 20 March 2025, 3 months ago

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

🐛 Bug report
Status

Active

Version

0.0

Component

Page builder

Created by

🇫🇮Finland lauriii Finland

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @lauriii
  • 🇺🇸United States sea2709 Texas

    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.

  • Pipeline finished with Failed
    2 months ago
    Total: 1679s
    #472133
  • 🇺🇸United States sea2709 Texas

    @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 think it's related to my changes.

  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    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! 😄

  • Status changed to Needs review 5 days ago
  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    Note that this is not the same as 🐛 Prevent navigation in component preview Active :

    • 🐛 Prevent navigation in component preview Active is about the preview of the code component in the code component editor
    • This issue is about the preview of a (published) code component in the XB preview of a component tree

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

  • 🇬🇧United Kingdom jessebaker

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

  • 🇬🇧United Kingdom jessebaker

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

  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

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

Production build 0.71.5 2024