Merge pull request #1314 from PrefectHQ/fix-date-month-yearh

Fix PDateInput closing when picking a month or year

src/components/Calendar/PCalendarDatePicker.vue

@@ -28,7 +28,7 @@
 
 <script lang="ts" setup>
   import { eachDayOfInterval, endOfMonth, endOfWeek, format, isSameDay, isSameMonth, isToday, startOfMonth, startOfWeek } from 'date-fns'
-  import { computed } from 'vue'
+  import { VNode, computed } from 'vue'
   import { ClassValue } from '@/types/attributes'
   import { isDateAfter, isDateBefore, isNotNullish } from '@/utilities'
 
@@ -55,7 +55,7 @@
   }>()
 
   defineSlots<{
-    date: (props: DateSlotScope) => any,
+    date: (props: DateSlotScope) => VNode,
   }>()
 
   const selected = computed({

src/components/PopOver/PPopOver.vue

@@ -72,11 +72,20 @@
 
   function eventHandler(event: MouseEvent | FocusEvent): void {
     const eventTarget = event.target as Element
-
+    const isMouseEvent = event instanceof MouseEvent
+
+    /*
+     * isEventInElement checks are backup checks for click events where the
+     * click changes the content of the popover. The element clicked on may
+     * no longer exist in the dom so the element.contains check will fail.
+     * So falling back to checking if the event x,y originated within the element
+     */
     if (
       !props.autoClose
       || target.value?.contains(eventTarget)
+      || isMouseEvent && isEventInElement(event, target.value)
       || content.value?.contains(eventTarget)
+      || isMouseEvent && isEventInElement(event, content.value)
       || eventTarget.closest('.p-pop-over-content') !== null
     ) {
       return
@@ -85,6 +94,26 @@
     close()
   }
 
+  function isEventInElement(event: MouseEvent, element: Element | undefined): boolean {
+    if (!element) {
+      return false
+    }
+
+    const rect = element.getBoundingClientRect()
+    const { clientX, clientY } = event
+
+    if (clientX < rect.left || clientX >= rect.right) {
+      return false
+    }
+
+    if (clientY < rect.top || clientY >= rect.bottom) {
+      return false
+    }
+
+    return true
+  }
+
+
   function open(): void {
     setGroupCloseMethod(close)
 

src/components/VirtualScroller/PVirtualScrollerChunk.vue

@@ -16,19 +16,19 @@
   }>()
 
   const styles = computed(() => ({
-    height: visible.value ? undefined : `${height.value ?? props.height}px`,
+    height: visible.value ? undefined : `${internalHeight.value ?? props.height}px`,
   }))
 
   const el = ref<HTMLDivElement>()
   const visible = ref(false)
-  const height = ref<number | null>(null)
+  const internalHeight = ref<number | null>(null)
   const { observe } = useIntersectionObserver(intersect, props.observerOptions)
 
   function setHeight(): void {
     setTimeout(() => {
       const rect = el.value!.getBoundingClientRect()
 
-      height.value = rect.height
+      internalHeight.value = rect.height
     })
   }