TotomInc / vue3-select-component

A flexible & modern select-input control for Vue 3.
https://vue3-select-component.vercel.app/
MIT License
58 stars 5 forks source link

Interactive demo doesn't work when accessing with a direct link #78

Open TotomInc opened 5 months ago

TotomInc commented 5 months ago

When accessing a demo link directly (without going to any other page), the interactive Vue-Select demo doesn't work.

How to reproduce :

  1. Go directly on this link: https://vue3-select-component.vercel.app/demo/single-select.html
  2. Try to click on the Vue-Select
  3. Nothing happens, an error is thrown in the console
TypeError: Cannot read properties of null (reading 'nextSibling')
    at nextSibling (framework.BuwTQXzN.js:17:682)
    at Jt (framework.BuwTQXzN.js:13:31280)
    at O (framework.BuwTQXzN.js:13:22819)
    at w (framework.BuwTQXzN.js:13:25401)
    at Object.process (framework.BuwTQXzN.js:13:39045)
    at O (framework.BuwTQXzN.js:13:23132)
    at w (framework.BuwTQXzN.js:13:25401)
    at L (framework.BuwTQXzN.js:13:24771)
    at M (framework.BuwTQXzN.js:13:23691)
    at O (framework.BuwTQXzN.js:13:23069)

However, if I'm going on any other page that doesn't contain a demo (e.g. props docs page), and then come back to a demo page it works fine.

It seems to be a Vitepress error, maybe related to hydration and SSR?

Isn't related to Vitepress, seems to be a Vue error: https://github.com/vuejs/core/issues/11230

TotomInc commented 3 months ago

The target element of the Teleport must exist at the time the Teleport is mounted. However, with Vue 3.5 the defer option has been added to mount the Teleport after the rendering cycle.

https://blog.vuejs.org/posts/vue-3-5#deferred-teleport

Try experimenting with the option as this may resolve the issue.

This isn't backward compatible and requires a strict peer dependency of vue@^3.5.x. We should also wait for vitepress to be updated with Vue 3.5

EDIT: I've tested with the defer on the <Teleport> of the menu, and it doesn't work. The error on vitepress is the same.