nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.4k stars 861 forks source link

Window scroll jumps when moving mouse on the popover #1087

Open vedmant opened 2 years ago

vedmant commented 2 years ago

I have a weird issue with VCalendar, when I move mouse over the popover it makes window scroll jump to 0.

https://user-images.githubusercontent.com/5052406/156120286-b1ec7fad-bcab-44b5-8616-43e10a941900.mp4

Here is my component code:

<template>
  <ClientOnly>
    <v-date-picker
      :value="value"
      mode="dateTime"
      is-range
      @input="v => $emit('input', v)"
    >
      <template #default="{ togglePopover }">
        <div class="flex items-center cursor-pointer" @click="togglePopover()">
          <div class="mr-2 text-sm text-gray-900">
            {{ dayjs(value.start).format('Do MMM YYYY') }} - {{ dayjs(value.end).format('Do MMM YYYY') }}
            ({{ dayjs(value.start).format('ha') }} - {{ dayjs(value.end).format('ha') }})
          </div>
          <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.67199 0.119883L4.99999 3.68011L1.32799 0.119883L0.199988 1.21703L4.99999 5.87988L9.79999 1.21703L8.67199 0.119883Z" fill="#969696" />
          </svg>
        </div>
      </template>
    </v-date-picker>
  </ClientOnly>
</template>

<script>
import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat'

dayjs.extend(advancedFormat)

export default {
  props: {
    value: { type: Object, required: true },
  },

  methods: {
    dayjs,
  },
}
</script>

I use Nuxt app, and registered VCalendar with a plugin:

import Vue from 'vue'
import VCalendar from 'v-calendar'

Vue.use(VCalendar)
swayne0927 commented 2 years ago

Same problem here, however I add :popover="{ positionFixed:true }" to v-date-picker attributes that is working for me.