floating-vue icon indicating copy to clipboard operation
floating-vue copied to clipboard

v-popover not opening/closing properly

Open kalnode opened this issue 4 years ago • 0 comments

Hello,

FAILS: v-popovers do not clear or open as expected. It takes multiple clicks to achieve correct state, and it's sometimes two popovers appear at once. https://codesandbox.io/s/vue-js-popover-forked-bb608?file=/src/components/Flyout.vue

WORKS: https://codesandbox.io/s/vue-js-popover-forked-wtu0p?file=/src/components/Flyout.vue Here, we use a plain v-if on the content slot based on the show prop we pass from the menu... but is this safe to do? Is it a coincidence that everything seems to work, but underneath there are still popovers not behaving properly? <template v-if="show" slot="popover">

QUESTION: Is there any problem using v-if on the v-popover content slot? Is the popover actually still "open" even if the content slot is hidden?

More details: -We use a "Flyout" component to wrap v-popover -We generate a unique ref per popover; maybe not needed, but safer -We are changing state on menu items, and using v-click-outside

kalnode avatar Jul 06 '21 23:07 kalnode