stalefish 8.0.6 → 8.0.7

package/components/dateTimePicker.mjs

@@ -117,8 +117,28 @@ export default ({ wrapperStyle = null, holdingPen, label, placeholder, property,
 
   // Create a stable id for the outer wrapper so we can query a real DOM node
   // after the template is rendered. Prefer the provided uniqueKey from callers
-  // (report-pal already supplies it), otherwise fall back to property/name.
-  const wrapperId = `sf-flatpickr-${uniqueKey || property || Math.random().toString(36).slice(2)}`
+  // but DO NOT require it. For robustness, memoize a per-(holdingPen, property)
+  // id so re-renders don't generate new ids and callers don't have to pass
+  // uniqueKey.
+  const ID_MAP_SYMBOL = Symbol.for('stalefish.flatpickr.idMap')
+  if (holdingPen && !holdingPen[ID_MAP_SYMBOL]) {
+    Object.defineProperty(holdingPen, ID_MAP_SYMBOL, {
+      value: {},
+      enumerable: false,
+      configurable: false,
+      writable: false
+    })
+  }
+  const memoId = (() => {
+    if (!holdingPen || !property) return null
+    const map = holdingPen[ID_MAP_SYMBOL]
+    if (!map) return null
+    if (!map[property]) {
+      map[property] = `sf-flatpickr-${property}-${Math.random().toString(36).slice(2)}`
+    }
+    return map[property]
+  })()
+  const wrapperId = `sf-flatpickr-${uniqueKey || memoId || property || Math.random().toString(36).slice(2)}`
 
   const inputType = resolvedDisableMobile ? 'text' : (detectTouchscreen() ? (timeOnly ? 'time' : 'date') : 'text')
 
@@ -166,12 +186,14 @@ export default ({ wrapperStyle = null, holdingPen, label, placeholder, property,
           flatpickrConfig,
           {
             wrap: true,
-            onValueUpdate: (fpDate, dateString) => {
+            // Avoid triggering rerenders on every spinner click which would
+            // destroy and recreate the popup, making it seem to "disappear".
+            // We update holdingPen once on close instead.
+            onValueUpdate: () => {},
+            onClose: (selectedDates, dateString) => {
               const fauxE = {
                 currentTarget: {
-                  validity: {
-                    valid: true
-                  },
+                  validity: { valid: true },
                   value: dateString
                 }
               }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stalefish",
-  "version": "8.0.6",
+  "version": "8.0.7",
   "description": "Simple function based component library for halfcab tagged template literals",
   "main": "index.mjs",
   "module": "index.mjs",