appendTo using an HTMLElement

[mehplzwhy]

I am trying to use the PrimeVue SplitButton appendTo to append the SplitButton's overlay menu to a container div. I'm doing this because I want the container div to react to mouseover events to display a child div that contains the SplitButton. When the user mouses over the container I want the div to be shown, and when the mouse leaves the container I want the div holding the SplitButton to not be shown. The problem I'm trying to solve is because the SplitButton's menu renders to an overlay outside the container the mouseleave event triggers and the menu disappears before the user can select anything. SplitButton's appendTo seems to be intended on letting me append the overlay to another HTMLElement for situations just like this. I want to let the user mouse over the SplitButton menu without triggering the parent container's mouseleave event so they can actually select something from the overlay menu.

Here's the basic code to accomplish this:

Code: Select all

<template>
  <div 
    ref="container" 
    @mouseover="hovering.value = true"
    @mouseleave="hovering.value = false" 
  >
    <!-- content not relevant -->
    <someOtherComponent />

    <div v-if="hovering">
      <SplitButton
        :append-to="container"
        :model="addItemOptions"
        label="Add Symbol"
        @click="addNewSymbol"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import SplitButton from "primevue/splitbutton";
import { ref, watch } from "vue";

// ref for container div
const container = ref<HTMLElement>();

// hovering state
const hovering = ref(false);

// options for SplitButton
const addItemOptions = [{
    label: "Label1",
    command: someFunc1,
  }, {
    label: "Label2",
    command: someFunc2,
  }, {
    label: "Label3",
    command: someFunc3,
  }
];
</script>

And it appears to work, as in the overlay div is appended into the "container" div, but I get console errors

Code: Select all

[Vue warn]: Invalid prop: type check failed for prop "appendTo". Expected String with value "[object HTMLDivElement]", got HTMLDivElement
...
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
...

And then once the mouseleave event triggers I can't retrigger the mouseover event for the container, so the SplitButton never reappears. And I see errors like this in the browser console:

Code: Select all

Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Can someone tell me what I'm doing wrong here?

[tugce.kucukoglu]

appendTo property accepts HTML selectors