Svelte MeltUI and BitsUI modals don't appear when their state is inside of a node view

[elyalon]

Any MeltUI and BitsUI modals that get triggered from inside of a node view component don't appear, in the example below I make a simple BlockFoo node view, the button element of the node view renders just fine, but when you click it a modal is supposed to open, but it doesn't.

Rendering this component outside of the editor has the correct behavior. Also, mounting the component manually inside of a regular node view (using Svelte's mount function) without using the adapter's nodeViewFactory has the correct behavior.

<!-- BlockFoo.svelte -->
<script lang="ts">
  import { Combobox } from "melt/builders";

  const combobox = new Combobox();
</script>

<div {...combobox.content} class="bg-blue-500">HELLO</div>
<button {...combobox.trigger} class="bg-red-500">Click Me</button>

// ...
// I register the node view like so:
  block_foo: nodeViewFactory({
    component: BlockFoo,
    as: "div",
  })
// ...

A weird thing I noticed is that when I trigger Vite's hot reload on the component (e.g. by changing bg-red-500 to bg-green-500), it suddenly gets the correct behavior. Though I don't think this is an issue with vite because if I just do vite build and serve dist/ the issue remains.

I can make an example project if you can't reproduce

[ocavue]

An example project would be super helpful 🙏

[elyalon]

https://github.com/elyalon/meltui-pm-adapter-modal-issue

Hopefully this helps :)

pnpm install and pnpm dev to run

[ocavue]

I've found the reason and submitted a pull request on the melt repo: melt-ui/next-gen#175

[ocavue]

I don't see similar issue from the latest version of BitsUI. If you can reproduce this issue with an example project, I can look into it too.

[elyalon]

Thank you! I tried reproducing the same issue I had with BitsUI but couldn't, I was using a weird combination of the Combobox and Popover components, and didn't bother debugging it before switching to melt