preventClicks: true is not working

[SebbeJohansson]

Doing { preventClicks: true, } in bridge options is not working. It is still following clicks.

Expected Behavior

I expect preventClicks to result in me not going to any of the links i click on a page when in the editor.

Current Behavior

Links to other pages (both internal and external) behaves the same as without the option.

Steps to Reproduce

1. Use the storyblok bridge in a project
2. Add options to do { preventClicks: true, }
3. Open the page in the editor.
4. Press a link.
5. Profit.

I have tested this both with a vue project and a nuxt project.

[minortom]

I have the same issue with a React + Next.js project

[SebbeJohansson]

Hi Storyblok. Can i get a confirmation if this issue is originating from one of the modules or from the app itself?

[SebbeJohansson]

Ive got a solution that works for now btw since this seems to not be fixed any time soon. What I do I nuxt is that I check if the page is loaded in preview, and in those cases I don't render a link at all. Works great, but a built in solution is preferable.

[fgiuliani]

Hi @SebbeJohansson sorry for the super late response.

I asked the team and they shared this with me:

The bridge is not preventing the clicks of the links outside of the block tree. In the bridge code, the preventClicks config is only checked when the user is clicking on a block. for the links outside a block, the config is ignored.

https://github.com/storyblok/storyblok-js/assets/464646/8de3899d-161b-4b94-922f-f55109953799

[SebbeJohansson]

@fgiuliani Hi! It could be that im misunderstanding the video and the text, but in my case the links are within the storyblok component (same for both a text-link and a div that has a link around it) and they go to links that are in storyblok in the same application (not sure that matters).

We have worked around this issue by programmatically changing any links into divs when in the editor.

[fgiuliani]

@SebbeJohansson thanks for the quick response! Can you share with me a piece of code that shows how you are setting up the preventClicks parameter?

[SebbeJohansson]

@fgiuliani Sure! Here is the code (a nuxt3 project), with some parts redacted.

<script setup lang="ts">
import { type ISbStoryData } from 'storyblok-js-client';
import { type StoryblokPage } from '~/typings/page-types';
import { type CmsPreview } from '~/utils/get-is-cms-preview-from-route';

const isCmsPreview = inject<ComputedRef<CmsPreview>>('isCmsPreview');

const props = defineProps<{
  page: StoryblokPage;
}>();

const story = ref<ISbStoryData>(props.page.storyblokPage);
const contentPageData = computed(() => ({
  ...story.value?.content,
  component:
    // Blog category should be rendered with blog page component
    story.value?.content.component === 'blog-category'
      ? 'blog-page'
      : story.value?.content.component,
}));

onMounted(() => {
  if (!isCmsPreview?.value.storyblok) return;

  window.storyblokRegisterEvent(() => {
    const { StoryblokBridge } = window;
    if (StoryblokBridge) {
      const storyblokInstance = new StoryblokBridge({
        preventClicks: true,
      });
      storyblokInstance.on(['published', 'change', 'input'], (event) => {
        story.value = event.story;
      });
    }
  });
});
</script>

<template>
  <div v-if="story" v-editable="contentPageData">
    <StoryblokComponent :blok="contentPageData" :raw="story" />
  </div>
</template>

[fgiuliani]

Thanks @SebbeJohansson ! I will pass the message to the team and share any insights.