Popper closes unexpectedly if click target was destroyed

[nikkwong]

Hi, I have a Popper which has some elements which may be destroyed like so:

<Popper><template #content="#content">
        <div class="popper-body"><button v-if="show" @click="show = false">Click me</button>
            <div class="after-click" v-if="!show">More Content</div>
        </div>
    </template>
    <p>Trigger</p>
</Popper>

Clicking the button unexpectedly closes the popper because of the following code in the library:

  beforeMount: (el, binding) => {
    el.clickAwayEvent = (event) => {
      if (!(el == event.target || el.contains(event.target)) && binding.value.enabled) {
        binding.value.handler();
      }
    };
    document.addEventListener("click", el.clickAwayEvent);
  }

The check el.contains(event.target) will return false, since the event target (the button) is now disconnected from the DOM.

I suggest changing this check to use event.path, i.e.: event.path.includes(el)

---

Unrelated but it would be nice to be able to destroy poppers. I am using a lot of these things all over my DOM and rather than just hiding or showing them, I would like to destroy the DOM. For example, if I have 100 poppers on the page, every click I make will trigger this handler 100 times, since the component is always alive.

Thank you!