Skip to content

BUG: Anchor links with hash navigation don't work in preview mode #6674

@OfirD1

Description

@OfirD1

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome 143.0.7499.41

Reproducible demo link

https://jsfiddle.net/mghzw41k/2/

Describe the bug

On preview mode, anchor links with hash navigation (e.g., href="#section") don't work.
The default browser navigation behavior is prevented, even though preview mode should (I think) allow normal page interactions.

How to reproduce the bug?

  • Initialize GrapesJS editor
  • Add content with an anchor link pointing to a section: <a href="#about">Go to About</a>
  • Add a target section: <section id="about">About Section</section>
  • Enter preview mode
  • Click the anchor link

Expected Behavior:
The preview page should scroll to the target section when clicking the anchor link, as it would in a normal browser.

Actual Behavior:
Nothing happens when clicking the anchor link. The default navigation behavior is prevented.

JSFiddle Code

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/grapes.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/grapes.min.css">
<div id="gjs"></div>
const editor = grapesjs.init({
  container: '#gjs',
});

editor.on('load', () => {
  editor.setComponents(`
    <div>
      <a href="#about" style="display: inline-block; padding: 10px; background: #007bff; color: white; text-decoration: none; border-radius: 4px;">Click to nav to About</a>
    </div>
    <div  style="height:1000px;background:red;">
      <span>... Spacing ...</span>
    </div>
    <section id="about" style="padding: 20px; background: #f0f0f0;">
      <h2>About Me</h2>
      <p>This is the about section that the button should navigate to.</p>
    </section>
  `);
});

Code of Conduct

  • I agree to follow this project's Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions