BUG: Anchor links with hash navigation don't work in preview mode
Question
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
Answers (1)
I encountered the same problem.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6458
BUG: sector.setName doesn't work
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://jsfi...
Issue #5334
BUG: Selection of custom component type not working in the canvas
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome, Opera, Edge, etc Reproducible demo...
Issue #5803
BUG: Filtering Blocks does not work as described in Docs
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v123 Reproducible demo link https:/...
Issue #4967
BUG: new storage doesn't work
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://jsfi...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.