search

Akryum / floating-vue

💬 Easy tooltips, popovers, dropdown, menus... for Vue
https://floating-vue.starpad.dev/
MIT License
3.32k stars 339 forks source link

fix: web components remount issue #922

Open LetItRock opened 1 year ago

LetItRock commented 1 year ago

Hello @Akryum! 👋

This PR fixes the issue that I've hit when using the Web Component as the popover content.

Steps to reproduce:

  1. Open --> popper node is added to the container --> will call connectedCallback on the Web Component
  2. Close -->
  3. Open --> appendChild called --> popper node is removed and added to the container --> will call disconnectedCallback and connectedCallback on the Web Component

The thing is that appendChild moves the child from its current position to the new one if it was added to the container ref and that is exactly what is going on in the third step, and because of it the Web Component is disconnected and connected right away. If the container already contains that popper node there is no reason to remove and add it again with appendChild call.

Tests passing. I've also verified if it works with the demo-vue3 app.

I'll appreciate it if we can merge it as it fixes the big issue for me. Thanks! 🙌