DatePicker: The position of the popover arrow does not change when the popover position changes

[Daniil-Zaitsau]

Version: 3.1.2

Description

The calendar popover can change its position depending on how much space is available to display it. However, if the position of the popover is changed, the position of the arrow does not change. The problem can be reproduced, including in the examples from the documentation: https://vcalendar.io/datepicker/slot-content.html#default-slot

Default state

After scrolling, the popover moves, but some classes and attributes are not updated

Workaround

If you have also encountered this problem, perhaps this solution will help you:

<template>
    <DatePicker ref="datePicker" :popover="popoverConfig"></DatePicker>
</template>

<script>
import { DatePicker } from "v-calendar";

export default {
    components: { DatePicker },
    data() {
        return {
            popoverConfig: {
                modifiers: [
                    {
                        name: "updateDirectionModifier",
                        enabled: true,
                        phase: "afterWrite",
                        fn: this.updateDirection,
                    },
                ],
            },
        };
    },
    methods: {
        updateDirection({ state }) {
            if (state) {
                this.$refs.datePicker.popoverRef.direction = state.placement.split("-")[0];
            }
        },
    },
};
</script>