fix: Selection overlay items overflow on parent height change (fixes #…

…601)
Vuepic · Oct 9, 2023 · 4889319 · 4889319
1 parent 610f2f3
commit 4889319
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/src/VueDatePicker/components/Common/SelectionOverlay.vue b/src/VueDatePicker/components/Common/SelectionOverlay.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script lang="ts" setup>
-    import { computed, nextTick, onBeforeUpdate, onMounted, onUnmounted, ref } from 'vue';
+    import { computed, nextTick, onBeforeUpdate, onMounted, onUnmounted, ref, watch } from 'vue';
 
     import { checkStopPropagation, convertType, unrefElement } from '@/utils/util';
     import { useArrowNavigation, useCommon, useDefaults } from '@/composables';
@@ -117,7 +117,7 @@
      * On mounted hook, set the scroll position, if any to a selected value when opening overlay
      */
     onMounted(() => {
-        nextTick().then(() => setScrollPosition());
+        nextTick().then(() => setContainerHeightAndScroll());
         if (!props.noOverlayFocus) {
             focusGrid();
         }
@@ -187,10 +187,13 @@
         dp__container_block: props.items?.length > 6,
     }));
 
-    /**
-     * Set scroll position in overlay based on active selection
-     */
-    const setScrollPosition = (): void => {
+    watch(
+        () => props.items,
+        () => setContainerHeightAndScroll(),
+        { deep: true },
+    );
+
+    const setContainerHeightAndScroll = () => {
         nextTick().then(() => {
             const el = unrefElement(selectionActiveRef);
             const parent = unrefElement(gridWrapRef);