Drawer : Template is always totaly build

[ptorrent]

Describe the bug

Hello,

Seems that Drawer is totaly rebuild every time I change the v-model:visible attribute. Is there a way to just build it the first time and show / hide it next time ?

Reproducer

https://stackblitz.com/edit/qkuurx?file=src%2FApp.vue

PrimeVue version

4.1.0

Vue version

4.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

All

Steps to reproduce the behavior

Just pu an alert inside the Drawer component, every time I change his visibility, the alert will fire.

Expected behavior

I think it will be good to build the content only once.. is there a way to do that ?

THanks for your support

[CCodam]

You could put the Drawer inside your component, instead of the other way around.
https://stackblitz.com/edit/qkuurx-1oo7zd?file=src%2FApp.vue

[ptorrent]

Are you sure it helps? The idea is to create the drawer content only once at first visible =true. Now you recreate content everytime visibility go from false to true

[ptorrent]

From my point of view:

<Portal>
        <div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" :style="sx('mask', true, { position })" v-bind="ptm('mask')">
            <transition name="p-drawer" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
                <div **v-if="visible"** :ref=

v-if="visible" is an error. Must be something like "visible || wasAlreadyOpened"... Everytime visible change from true to false, the content is removed... and everything is rebuild when visible = true again. Is there a workarround for this behavior ?