fix(datepicker): fix Flatpickr 1px calendar width on hidden date pickers

tpl/Controls/DatePickerSetup.tpl

@@ -11,12 +11,6 @@
                 }
             }
 
-            function initFlatpickrOnce(element, config) {
-                if (!element._flatpickr) {
-                    flatpickr(element, config);
-                }
-            }
-
             function initDatePicker_{$ControlId}() {
             const control = document.getElementById("{$ControlId}");
             if (!control) return;
@@ -54,25 +48,86 @@
                 weekNumbers: {if $ShowWeekNumbers}true{else}false{/if},
             };
 
-            const init = () => initFlatpickrOnce(control, config);
+            // Initialize Flatpickr immediately so _flatpickr is always
+            // available to consumers. If the control is inside a hidden
+            // ancestor, Flatpickr's setCalendarWidth() computes incorrect
+            // dimensions (1px). We fix this by triggering a width
+            // recalculation once all blocking ancestors become visible.
+            if (!control._flatpickr) {
+                flatpickr(control, config);
+            }
+
+            function getBlockingHiddenAncestor() {
+                const hiddenClassAncestor = control.closest('.d-none');
+                if (hiddenClassAncestor) {
+                    return { type: 'class', element: hiddenClassAncestor };
+                }
 
-            const collapse = control.closest('.collapse');
-            const modal = control.closest('.modal');
+                const hiddenCollapse = control.closest('.collapse:not(.show)');
+                if (hiddenCollapse) {
+                    return { type: 'collapse', element: hiddenCollapse };
+                }
 
-            if (modal) {
-                modal.addEventListener('shown.bs.modal', init, { once: true });
-                return;
+                const hiddenModal = control.closest('.modal:not(.show)');
+                if (hiddenModal) {
+                    return { type: 'modal', element: hiddenModal };
+                }
+
+                return null;
             }
 
-            if (collapse) {
-                collapse.addEventListener('shown.bs.collapse', init);
-                if (collapse.classList.contains('show')) {
-                    init();
+            // Force Flatpickr to recalculate calendar width via its
+            // public set() API. Setting showMonths triggers the internal
+            // setCalendarWidth() callback which measures offsetWidth.
+            function recalcWidthIfNeeded() {
+                const fp = control._flatpickr;
+                if (!fp) return;
+
+                const blockingAncestor = getBlockingHiddenAncestor();
+                if (blockingAncestor) {
+                    // Still hidden behind another ancestor; wait for it too.
+                    waitForVisible(blockingAncestor);
+                    return;
                 }
-                return;
+
+                // All ancestors are now visible; recalculate width.
+                fp.set('showMonths', fp.config.showMonths);
             }
 
-            init();
+            function waitForVisible(blockingAncestor) {
+                if (blockingAncestor.type === 'class') {
+                    const observer = new MutationObserver(function(mutations) {
+                        for (const mutation of mutations) {
+                            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                                if (!blockingAncestor.element.classList.contains('d-none')) {
+                                    observer.disconnect();
+                                    recalcWidthIfNeeded();
+                                    return;
+                                }
+                            }
+                        }
+                    });
+                    observer.observe(blockingAncestor.element, { attributes: true, attributeFilter: ['class'] });
+                    return;
+                }
+
+                if (blockingAncestor.type === 'collapse') {
+                    blockingAncestor.element.addEventListener('shown.bs.collapse', recalcWidthIfNeeded, { once: true });
+                    return;
+                }
+
+                if (blockingAncestor.type === 'modal') {
+                    blockingAncestor.element.addEventListener('shown.bs.modal', recalcWidthIfNeeded, { once: true });
+                    return;
+                }
+            }
+
+            // If the control is currently hidden, set up listeners to
+            // recalculate width when it becomes visible.
+            const initialBlocker = getBlockingHiddenAncestor();
+            if (initialBlocker) {
+                waitForVisible(initialBlocker);
+            }
         }
 
         // Waiting for Flatpickr to exist