floating-vue
floating-vue copied to clipboard
v-popover (manual trigger) stops working randomly when popper-options are passed in.
For some reasons, when triggering the popover in manual mode it does work for a while but then it stops working.
Removing the popper-options does fix that.
https://user-images.githubusercontent.com/10697451/161283403-ea9e544c-06eb-427c-9b25-378237a5656c.mp4
Reproducible link: https://codesandbox.io/s/dawn-wave-2v1omv
<template>
<div class="container">
<div
class="wrapper"
@mouseenter="popover = true"
@mouseleave="popover = false"
>
<v-popover
trigger="manual"
:open="popover"
:popper-options="{
modifiers: {
preventOverflow: {
boundary: '.container',
padding: {
top: 40,
},
},
},
}"
>
<div>Trigger #1 ({{ popover }})</div>
<template #popover v-if="popover">
<div>Popover #1</div>
</template>
</v-popover>
</div>
<div
class="wrapper"
@mouseenter="popover2 = true"
@mouseleave="popover2 = false"
>
<v-popover trigger="manual" :open="popover2">
<div>Trigger #2 ({{ popover2 }})</div>
<template #popover v-if="popover2">
<div>Popover #2</div>
</template>
</v-popover>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
popover: false,
popover2: false,
};
},
};
</script>