playbook_ui 16.10.0.pre.alpha.play300617418 → 16.10.0.pre.alpha.play300617429

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eea9e460fe3172005e0ffb859d2110dfd98731a78012d2e0c980fa030d16e51b
-  data.tar.gz: a9ff3972f4b7c8f841626687a74ea0475a3f6e3ccba811df5f3a6d7a4ecd7f6c
+  metadata.gz: cc61e3b1cf418d10b8c89717465ec82d728f918711ab223e03065119d0e6ebe2
+  data.tar.gz: a59e2de7ba4dbba8477676d95664dd0442148d2effd74ad5c9f1162e7e451693
 SHA512:
-  metadata.gz: 461c23cf434287c4d6b23afdaa85ac7f66737a9b546652ef7508cf95d06c61b2d3b3b05e7db5f5711a37a5663c8fb967cd7959f3fb32c2bd8d2bce5414252cf8
-  data.tar.gz: a854d92ff8049450212c46c721930ba6dac1350107582e06749b240af20efaf7f6debeccfebd10da39c6b323dff1752b08c7f9154c0625fce38ecb56b377b30e
+  metadata.gz: 0dd024e07261c2ead3b178c94561265f0a64caa2f07d177c71f2ef325163243c630d4903290151e7cf3eff0c70c3a1840ba56d646d31c6fff49107c37e1066e9
+  data.tar.gz: d16f9553b4b72dca3f94d39b9d3dc29529bf17c0dcb24b0154fe127e610298f9f155d1533df6e2f90a7ef6c86d5078c67b4f8dc102fe6a7a6d97f2053a5d87ac

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -80,3 +80,9 @@
     content: none;
   }
 }
+
+.pb_date_picker_floating_shell {
+  margin: 0;
+  padding: 0;
+  pointer-events: auto;
+}

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useContext, useEffect } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -6,6 +6,7 @@ import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalPr
 import { getAllIcons } from "../utilities/icons/allicons"
 import { camelToSnakeCase } from '../utilities/text'
 
+import { DialogContext } from '../pb_dialog/_dialog_context'
 import datePickerHelper from './date_picker_helper'
 import Icon from '../pb_icon/_icon'
 import Caption from '../pb_caption/_caption'
@@ -149,6 +150,8 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     syncEndWith,
   } = props
 
+  const dialogCtx = useContext(DialogContext)
+
   const ariaProps = buildAriaProps(aria)
   const normalizedDefaultDate = normalizeDefaultDate(defaultDate)
   const filterResetDefaultSerialized = serializeDefaultDateForFilterReset(normalizedDefaultDate)
@@ -186,6 +189,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       format,
       hideIcon,
       inLine,
+      inline: inLine,
       maxDate,
       minDate,
       mode,
@@ -208,8 +212,18 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       syncStartWith,
       syncEndWith,
       required: false,
+      dialogPortalTarget: dialogCtx?.selectMenuPortalTarget ?? null,
     }, scrollContainer)
-  }, initializeOnce ? [] : undefined)
+
+    return () => {
+      const input = document.getElementById(String(pickerId)) as
+        | (HTMLElement & { _flatpickr?: { destroy: () => void }; _pbDatePickerOpenUnsub?: () => void })
+        | null
+      input?._pbDatePickerOpenUnsub?.()
+      delete input?._pbDatePickerOpenUnsub
+      input?._flatpickr?.destroy()
+    }
+  }, initializeOnce ? [initializeOnce, dialogCtx?.selectMenuPortalTarget, pickerId] : undefined)
 
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -96,22 +96,73 @@
         })
       }
 
+      const disconnectPopoverWatch = (input) => {
+        if (!input) return
+
+        if (input._pbDatePickerPopoverObserver) {
+          input._pbDatePickerPopoverObserver.disconnect()
+          delete input._pbDatePickerPopoverObserver
+        }
+
+        delete input.dataset.pbDatePickerPopoverWatch
+      }
+
       const loadDatePicker = () => {
         const input = document.getElementById("<%= object.picker_id %>")
 
-        if (!input || input._flatpickr) return true
+        if (!input || input._flatpickr) {
+          disconnectPopoverWatch(input)
+          return true
+        }
         if (typeof window.datePickerHelper !== "function") return false
 
+        const popoverTooltip = input.closest(".pb_popover_tooltip")
+        if (popoverTooltip && !popoverTooltip.classList.contains("show")) {
+          return false
+        }
+
         window.datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
         initQuickPickChangeListener(input)
+        disconnectPopoverWatch(input)
 
         return true
       }
 
+      const watchPopoverVisibility = () => {
+        const input = document.getElementById("<%= object.picker_id %>")
+        if (!input || input.dataset.pbDatePickerPopoverWatch) return
+
+        const popoverTooltip = input.closest(".pb_popover_tooltip")
+        if (!popoverTooltip) return
+
+        input.dataset.pbDatePickerPopoverWatch = "true"
+        const tryInitWhenVisible = () => {
+          if (!input.isConnected || !popoverTooltip.isConnected) {
+            disconnectPopoverWatch(input)
+            return
+          }
+
+          if (popoverTooltip.classList.contains("show")) {
+            loadDatePicker()
+          }
+        }
+
+        const observer = new MutationObserver(tryInitWhenVisible)
+        input._pbDatePickerPopoverObserver = observer
+        observer.observe(popoverTooltip, { attributes: true, attributeFilter: ["class"] })
+        tryInitWhenVisible()
+      }
+
       let attempts = 0
       const retryLoad = () => {
         if (loadDatePicker()) return
 
+        const input = document.getElementById("<%= object.picker_id %>")
+        if (input?.closest(".pb_popover_tooltip")) {
+          watchPopoverVisibility()
+          return
+        }
+
         if (attempts++ < 20) {
           setTimeout(retryLoad, 100)
         }
@@ -134,6 +185,12 @@
       if (<%= !object.custom_event_type.empty? %>) {
         window.addEventListener("<%= object.custom_event_type %>", retryLoad)
       }
+
+      document.addEventListener("turbo:before-cache", () => {
+        const input = document.getElementById("<%= object.picker_id %>")
+        disconnectPopoverWatch(input)
+        input?._flatpickr?.destroy()
+      })
     })()
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -6,6 +6,18 @@ import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
 import timeSelectPlugin from './plugins/timeSelect'
 import quickPickPlugin from './plugins/quickPick'
 import { getAllIcons } from '../utilities/icons/allicons';
+import {
+  announceFloatingKitOpen,
+  nextPortaledFloatingZIndex,
+  positionDropdownPortalToWrapper,
+  resolveFloatingOwnerId,
+  resolvePortaledFloatingZIndex,
+  resolvePortaledKitHost,
+  kitRequiresPortaledFloatingUi,
+  setFloatingOwnerAttribute,
+  subscribeFloatingKitOpen,
+  subscribeFloatingKitReposition,
+} from '../utilities/floatingPortalHosts'
 
 const { angleDown, angleLeft, angleRight } = getAllIcons()
 const angleDownString = angleDown.string
@@ -41,7 +53,9 @@ type DatePickerConfig = {
     controlsEndId?: string,
     syncStartWith?: string,
     syncEndWith?: string,
-} & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
+  /** React Dialog floating root; omit in Rails (DOM resolution only). */
+  dialogPortalTarget?: HTMLElement | null,
+} & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" | "inline" >
 
 const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
   const noop = () => {
@@ -80,8 +94,92 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     controlsEndId,
     syncStartWith,
     syncEndWith,
+    dialogPortalTarget,
+    inline = false,
   } = config
 
+  const inputElForPortal =
+    typeof document !== "undefined"
+      ? document.querySelector<HTMLElement>(`#${String(pickerId)}`)
+      : null
+  const kitRootForPortal = inputElForPortal?.closest(".pb_date_picker_kit") as HTMLElement | null
+  const portalHost =
+    !inline && kitRootForPortal && kitRequiresPortaledFloatingUi(kitRootForPortal)
+      ? resolvePortaledKitHost(kitRootForPortal, dialogPortalTarget ?? null)
+      : null
+
+  const floatingOwnerId = resolveFloatingOwnerId(kitRootForPortal)
+  const effectiveStatic = portalHost ? false : staticPosition
+
+  type DatePickerInputEl = HTMLElement & {
+    _flatpickr?: Instance
+    _pbDatePickerOpenUnsub?: () => void
+  }
+
+  const existingInput = document.querySelector(`#${String(pickerId)}`) as DatePickerInputEl | null
+  if (existingInput?._pbDatePickerOpenUnsub) {
+    existingInput._pbDatePickerOpenUnsub()
+    delete existingInput._pbDatePickerOpenUnsub
+  }
+  if (existingInput?._flatpickr) {
+    existingInput._flatpickr.destroy()
+  }
+
+  let portalAppendShell: HTMLElement | undefined
+
+  const removePortalShell = (): void => {
+    if (!portalHost) return
+
+    const shellSelector = `[data-pb-date-picker-floating-shell="${String(pickerId)}"]`
+    const shell =
+      portalAppendShell?.isConnected
+        ? portalAppendShell
+        : (portalHost.querySelector(shellSelector) as HTMLElement | undefined)
+
+    shell?.remove()
+    portalAppendShell = undefined
+  }
+
+  const ensurePortalShell = (): HTMLElement | undefined => {
+    if (!portalHost) return undefined
+    if (portalAppendShell?.isConnected) return portalAppendShell
+
+    const shellSelector = `[data-pb-date-picker-floating-shell="${String(pickerId)}"]`
+    portalAppendShell =
+      portalHost.querySelector(shellSelector) as HTMLElement | undefined
+
+    if (!portalAppendShell) {
+      portalAppendShell = document.createElement("div")
+      portalAppendShell.className = "pb_date_picker_floating_shell pb_date_picker_kit"
+      portalAppendShell.setAttribute(
+        "data-pb-date-picker-floating-shell",
+        String(pickerId),
+      )
+      portalAppendShell.addEventListener("mousedown", (e) => {
+        e.stopPropagation()
+      })
+      portalAppendShell.addEventListener("click", (e) => {
+        e.stopPropagation()
+      })
+      portalHost.appendChild(portalAppendShell)
+    }
+
+    setFloatingOwnerAttribute(portalAppendShell, floatingOwnerId)
+    return portalAppendShell
+  }
+
+  const mountCalendarInPortalShell = (fp: Instance): void => {
+    const shell = ensurePortalShell()
+    if (!shell?.isConnected || !fp.calendarContainer) return
+    if (fp.calendarContainer.parentElement !== shell) {
+      shell.appendChild(fp.calendarContainer)
+    }
+  }
+
+  let activePortalZIndex: string | undefined
+
+  let unsubscribeFloatingReposition: (() => void) | null = null
+
   // ===========================================================
   // |                   Hook Definitions                      |
   // ===========================================================
@@ -188,6 +286,12 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 
   const positionCalendarIfNeeded = (fp: Instance) => {
+    if (portalHost) {
+      mountCalendarInPortalShell(fp)
+      fp._positionCalendar()
+      return
+    }
+
     const cal = document.querySelector(`#cal-${pickerId}`) as HTMLElement
     if (!cal) return
 
@@ -197,7 +301,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     const spaceAbove = inputRect.top
 
     if (spaceBelow < h + 10 && spaceAbove >= h + 10) {
-      if (staticPosition) {
+      if (effectiveStatic) {
         cal.style.top = 'auto'
         cal.style.bottom = 'calc(100% + 5px)'
       } else {
@@ -205,7 +309,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
         cal.style.top = `${Math.max(10, inputRect.top - h - 5)}px`
         cal.style.left = `${inputRect.left}px`
       }
-    } else if (staticPosition) {
+    } else if (effectiveStatic) {
       cal.style.top = ''
       cal.style.bottom = ''
     } else {
@@ -239,9 +343,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 
   // Attach / detach to / from scroll events
-  const initialPicker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
   const scrollEvent = () => {
-    initialPicker._positionCalendar()
+    const fp = document.querySelector<HTMLElement & { _flatpickr?: Instance }>(`#${pickerId}`)
+      ?._flatpickr
+    fp?._positionCalendar()
   }
   function attachToScroll(scrollParent: string | HTMLElement) {
     document.querySelectorAll(scrollParent as string)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
@@ -250,10 +355,23 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     document.querySelectorAll(scrollParent as string)[0]?.removeEventListener("scroll", scrollEvent)
   }
 
+  const yearSelectId = `year-${pickerId}`
+
+  const yearDropdownFromCalendar = (fp: Instance): HTMLSelectElement | null => {
+    return fp.calendarContainer?.querySelector<HTMLSelectElement>(`#${yearSelectId}`) ?? null
+  }
+
+  const yearDropdownIsReady = (fp: Instance): boolean => {
+    const dropdown = yearDropdownFromCalendar(fp)
+    return dropdown !== null && dropdown.options.length > 0
+  }
+
   // two way binding
   const yearChangeHook = (fp: Instance) => {
-      const yearInput = document.querySelector(`#year-${fp.input.id}`) as HTMLInputElement
+    const yearInput = yearDropdownFromCalendar(fp)
+    if (yearInput) {
       yearInput.value = fp.currentYear?.toString()
+    }
   }
 
   const handleDatePickerChange = (fp: Instance, selectedDates: Date[]) => {
@@ -355,7 +473,94 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     : setMaxDate
   
   // End of Default Date + Min/Max Date Initialization Helper Functions section ----/
-  
+  const resolveDatePickerPortalWrapper = (input: HTMLElement): HTMLElement | null => {
+    return (
+      (input.closest(".date_picker_input_wrapper") as HTMLElement | null) ??
+      (input.closest(".text_input_wrapper") as HTMLElement | null) ??
+      (input.closest(".input_wrapper") as HTMLElement | null) ??
+      (input.closest(".pb_date_picker_kit") as HTMLElement | null)
+    )
+  }
+
+  const portalPositionFn: ((self: Instance) => void) | undefined = portalHost
+    ? (self: Instance) => {
+        mountCalendarInPortalShell(self)
+        const shell = ensurePortalShell()
+        const cal = self.calendarContainer
+        if (!cal || !shell) return
+        const wrap = resolveDatePickerPortalWrapper(self.input)
+        const host = shell.parentElement as HTMLElement | null
+        if (!wrap || !host) return
+        positionDropdownPortalToWrapper({
+          panel: cal,
+          wrapperViewportRect: wrap.getBoundingClientRect(),
+          positionHost: host,
+          matchWrapperWidth: selectionType === "quickpick",
+          zIndex: activePortalZIndex,
+        })
+      }
+    : undefined
+
+  const setupYearMonthDropdowns = (fp: Instance) => {
+    if (yearDropdownIsReady(fp) || !fp.yearElements?.[0]?.parentElement) return
+
+    fp.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="${yearSelectId}"></select>`
+
+    let years = ''
+    if (yearAscending) {
+      for (let year = setMinYear; year <= setMaxYear; year++) {
+        years += `<option value="${year}">${year}</option>`
+      }
+    } else {
+      for (let year = setMaxYear; year >= setMinYear; year--) {
+        years += `<option value="${year}">${year}</option>`
+      }
+    }
+
+    const dropdown = yearDropdownFromCalendar(fp)
+    if (!dropdown) return
+
+    dropdown.innerHTML = years
+    dropdown.value = String(fp.currentYear)
+
+    dropdown.addEventListener('input', (e: Event & { target: { value: string }}) => {
+      fp.changeYear(Number(e.target.value))
+    })
+
+    if (fp.input.form) {
+      fp.input.form.addEventListener('reset', () => {
+        setTimeout(() => {
+          dropdown.value = String(fp.currentYear)
+          if (fp.monthsDropdownContainer) {
+            fp.monthsDropdownContainer.value = String(fp.currentMonth)
+          }
+
+          if (defaultDate) {
+            fp.setDate(defaultDate)
+            yearChangeHook(fp)
+          }
+        }, 0)
+      })
+    }
+
+    if (!dropdown.nextElementSibling?.classList.contains('year-dropdown-icon')) {
+      dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDownString}</i>`)
+    }
+    if (
+      fp.monthElements[0]?.parentElement &&
+      !fp.calendarContainer?.querySelector('.month-dropdown-icon')
+    ) {
+      fp.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDownString}</i>`)
+    }
+  }
+
+  const assignCalendarId = (fp: Instance): void => {
+    const calEl = fp.calendarContainer ?? fp.innerContainer?.parentElement
+    if (calEl) {
+      calEl.id = `cal-${pickerId}`
+    }
+  }
+
   flatpickr(`#${pickerId}`, {
     allowInput,
     closeOnSelect,
@@ -372,6 +577,25 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     mode,
     nextArrow: `<div style="height: 14px;">${angleRightString}</div>`,
     onOpen: [(_selectedDates, _dateStr, fp) => {
+      activePortalZIndex = portalHost
+        ? resolvePortaledFloatingZIndex(
+            portalHost,
+            nextPortaledFloatingZIndex(),
+          )
+        : undefined
+      if (portalHost) {
+        mountCalendarInPortalShell(fp)
+      }
+      if (portalAppendShell) {
+        portalAppendShell.style.zIndex = activePortalZIndex
+        setFloatingOwnerAttribute(portalAppendShell, floatingOwnerId)
+      }
+      if (fp.calendarContainer) {
+        fp.calendarContainer.style.zIndex = activePortalZIndex
+        setFloatingOwnerAttribute(fp.calendarContainer, floatingOwnerId)
+      }
+      announceFloatingKitOpen('date-picker', floatingOwnerId)
+
       // If defaultDate was out of range of a dev set min/max date, restore it when calendar opens (in situation where the input was manually cleared or the calendar was closed without selection)
       if (hasOutOfRangeDefault) {
         const dateObj = toDateObject(defaultDateValue)
@@ -402,15 +626,37 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
         positionCalendarIfNeeded(fp)
       }
       window.addEventListener('resize', resizeRepositionHandlerRef)
-      if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
+      if (!effectiveStatic && scrollContainer) attachToScroll(scrollContainer)
+      if (portalHost) {
+        unsubscribeFloatingReposition = subscribeFloatingKitReposition(() => {
+          positionCalendarIfNeeded(fp)
+        })
+      }
+      assignCalendarId(fp)
       positionCalendarIfNeeded(fp)
+      setupYearMonthDropdowns(fp)
+    }],
+    onDestroy: [() => {
+      if (unsubscribeFloatingReposition) {
+        unsubscribeFloatingReposition()
+        unsubscribeFloatingReposition = null
+      }
+      if (resizeRepositionHandlerRef) {
+        window.removeEventListener('resize', resizeRepositionHandlerRef)
+        resizeRepositionHandlerRef = null
+      }
+      removePortalShell()
     }],
     onClose: [(selectedDates, dateStr, fp) => {
+      if (unsubscribeFloatingReposition) {
+        unsubscribeFloatingReposition()
+        unsubscribeFloatingReposition = null
+      }
       if (resizeRepositionHandlerRef) {
         window.removeEventListener('resize', resizeRepositionHandlerRef)
         resizeRepositionHandlerRef = null
       }
-      if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
+      if (!effectiveStatic && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
       
       // If defaultDate was out of range and no date was selected, preserve the default date
       if (hasOutOfRangeDefault && (!selectedDates || selectedDates.length === 0)) {
@@ -440,15 +686,17 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       yearChangeHook(fp)
     }],
     plugins: setPlugins(thisRangesEndToday, customQuickPickDates),
-    position,
+    position: portalPositionFn ?? position,
     positionElement: getPositionElement(positionElement),
     prevArrow: `<div style="height: 14px;">${angleLeftString}</div>`,
-    static: staticPosition,
+    static: effectiveStatic,
   })
 
   // Assign dynamically sourced flatpickr instance to variable
-  const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
-  picker.innerContainer.parentElement.id = `cal-${pickerId}`
+  const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)?._flatpickr
+  if (!picker) return
+
+  assignCalendarId(picker)
 
   // If defaultDate was out of range, restore the original minDate/maxDate after initialization (defaultDate displayed, still cannot select dates outside the actual range via user provided minDate/maxDate constraints)
   if ((isBeforeMin || isAfterMax) && defaultDateValue) {
@@ -515,51 +763,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }, 10)
   }
 
-  // replace year selector with dropdown
-  picker.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="year-${pickerId}"></select>`
-
-  // create html option tags for desired years
-  let years = ''
-  if (yearAscending) {
-    for (let year = setMinYear; year <= setMaxYear; year++) {
-      years += `<option value="${year}">${year}</option>`
-    }
-  } else {
-    for (let year = setMaxYear; year >= setMinYear; year--) {
-      years += `<option value="${year}">${year}</option>`
-    }
-  }
-
-  // variablize each dropdown selector
-  const dropdown = document.querySelector<HTMLElement & { [x: string]: any }>(`#year-${pickerId}`)
-
-  // inject year options into dropdown and assign it the flatpickr's current year value
-  dropdown.innerHTML = years
-  dropdown.value = picker.currentYear
-
-  // whenever a new year is selected from dropdown update flatpickr's current year value
-  dropdown.addEventListener('input', (e: Event & { target: { value: string}}) => {
-    picker.changeYear(Number(e.target.value))
-  })
-
-  // Reverse month and year dropdown reset on form.reset()
-  if (picker.input.form) {
-    picker.input.form.addEventListener('reset', () => {
-      // Code block triggers after form.reset() is called and executed
-      setTimeout(() => {
-        dropdown.value = picker.currentYear
-        if (picker.monthsDropdownContainer) {
-          picker.monthsDropdownContainer.value = picker.currentMonth
-        }
-
-        /* Reset date picker to default value on form.reset() */
-        if (defaultDate){
-          picker.setDate(defaultDate)
-          yearChangeHook(picker)
-        }
-      }, 0)
-    })
-  }
+  setupYearMonthDropdowns(picker)
 
   // === Automatic Sync Logic for 3 input range pattern===
 
@@ -661,11 +865,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
-  // Adding dropdown icons to year and month select
-  dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDownString}</i>`)
-  if (picker.monthElements[0].parentElement) {
-    return picker.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDownString}</i>`)}
-
   // Remove readonly attribute for validation and or text input
   if (allowInput){
     picker.input.removeAttribute('readonly')
@@ -677,8 +876,55 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     picker.input.style.cursor = 'pointer'
   }
 
+  const stopPointerForFlatpickrDocClose = (e: Event) => {
+    e.stopPropagation()
+  }
+
+  // Prevent flatpickr's document mousedown listener from treating the opening click as outside.
+  picker.input.addEventListener('mousedown', stopPointerForFlatpickrDocClose)
+  picker.input.addEventListener('touchstart', stopPointerForFlatpickrDocClose, { passive: true })
+
+  const calIconWrapper = document.querySelector(`#cal-icon-${pickerId}`) as HTMLElement | null
+  const isPointerInCalIcon = (e: MouseEvent) => {
+    if (!calIconWrapper) return false
+    const rect = calIconWrapper.getBoundingClientRect()
+    return (
+      e.clientX >= rect.left &&
+      e.clientX <= rect.right &&
+      e.clientY >= rect.top &&
+      e.clientY <= rect.bottom
+    )
+  }
+
+  const openDatePickerFromUi = (e: MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (picker.input.disabled) return
+    if (picker.isOpen) {
+      picker.close()
+      return
+    }
+    picker.open()
+    picker.input.focus()
+  }
+
+  const textInputWrapper = picker.input.closest('.text_input_wrapper') as HTMLElement | null
+  const inputWrapper = picker.input.closest('.input_wrapper') as HTMLElement | null
+  inputWrapper?.addEventListener('click', (e: MouseEvent) => {
+    if (e.target === picker.input) return
+    if (!isPointerInCalIcon(e) && !textInputWrapper?.contains(e.target as Node)) return
+    openDatePickerFromUi(e)
+  })
+
+  const pickerInput = picker.input as DatePickerInputEl
+  pickerInput._pbDatePickerOpenUnsub = subscribeFloatingKitOpen(({ kitKind }) => {
+    if (kitKind !== 'date-picker' && picker.isOpen) {
+      picker.close()
+    }
+  })
+
   // Fix event bubbling bug on wrapper
-  document.querySelector(`#${pickerId}`).parentElement.addEventListener('click', (e) => e.stopPropagation())
+  document.querySelector(`#${pickerId}`)?.parentElement?.addEventListener('click', (e) => e.stopPropagation())
 }
 
 export default datePickerHelper