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

v-popover (manual trigger) stops working randomly when popper-options are passed in.

Open plrenaudin opened this issue 3 years ago • 0 comments

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>

plrenaudin avatar Apr 01 '22 14:04 plrenaudin