[Bug] Popup automatically close when append-to-body is false

[dallefeste]

Vue2-datepicker version: 3.11.1
Vue version: 2.6.11
Browser: chrome

Steps to reproduce
I've integrated the vue2-datepicker with the 'append-to-body' flag set to true, and the component works properly. However, when I change it to false (since I'm integrating it into a web component), it correctly places the popup in the right DOM element. However, upon selecting a date (including any click inside the popup), it closes the popup without capturing the selected date or date range.

Reproduction Link or Source Code

<div style="position: relative;">
    <date-picker 
        ref="datepicker"
        :append-to-body="false"
        timeTitleFormat="MM"
        :editable="false"
        :confirm="false"
        @pick="handlePickDate"
        @open="handleOpenPopupEvent"
        @close="handleClosePopupEvent"
        :disabled-date="disabledRangeHandler"
        v-model="rangeDate" 
        format="DD MMM YY"
        valueType="date"
        range-separator=" - "
        :range="isRange"
    >
    </date-picker>
    <div ref="target" style="position: relative;"></div>
</div>

And in the js:

mounted: function () {
    const el = this.$refs.datepicker.$refs.popup.$el;
    this.$refs.target.appendChild(el);
}

Thank you for your work.

[dallefeste]

I've identified a potential solution. It appears that the issue can be associated with the Shadow DOM generated by the web component. In this scenario, the handleClickOutside method in the popup.vue file is not effectively managing the DOM. Would the following code serve as an appropriate fix for releasing a new version of your component?

handleClickOutside(evt) {
        if (!this.visible) return;
        const el = this.$el;
        if (el && !evt.composedPath().includes(el)) {
            this.$emit('clickoutside', evt);
        }
    },

Thanks again for your support.