stalefish 8.0.6 → 8.0.8

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')
 
@@ -134,7 +154,21 @@ export default ({ wrapperStyle = null, holdingPen, label, placeholder, property,
     e.target.parentNode.parentNode._flatpickr.close()
     return false
   }}>clear</div>` : ''}
-       <input data-gramm="false" ?disabled=${disabled} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" ${required ? { required: 'required' } : ''} onchange=${e => { change({ e, holdingPen, property, label: styles.label }); onchange && onchange(e) }} oninput=${e => { e.target.defaultValue = ''; oninput && oninput(e) }} placeholder="${placeholder || ''}${required ? ' *' : ''}" type="${inputType}" ${pattern ? { pattern } : ''} .value=${holdingPen[property] || ''} data-input />
+       <input data-gramm="false" ?disabled=${disabled} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" ${required ? { required: 'required' } : ''} onchange=${e => {
+  // Guard against re-render while Flatpickr popup is open: native input onchange
+  // can fire on spinner clicks, which would propagate to the parent onchange
+  // and trigger a re-render tearing down the popup. If the picker is open,
+  // ignore this native onchange and let flatpickr's onClose handler sync state.
+  const wrapperEl = e.target && e.target.parentNode && e.target.parentNode.parentNode
+  const fp = wrapperEl && wrapperEl._flatpickr
+  if (fp && fp.isOpen) {
+    e.stopPropagation()
+    e.preventDefault()
+    return false
+  }
+  change({ e, holdingPen, property, label: styles.label })
+  onchange && onchange(e)
+}} oninput=${e => { e.target.defaultValue = ''; oninput && oninput(e) }} placeholder="${placeholder || ''}${required ? ' *' : ''}" type="${inputType}" ${pattern ? { pattern } : ''} .value=${holdingPen[property] || ''} data-input />
        </div>
     </div>
     `
@@ -144,7 +178,7 @@ export default ({ wrapperStyle = null, holdingPen, label, placeholder, property,
   // adapter expects a real Element. We defer with requestAnimationFrame and
   // query by id.
   if (typeof window !== 'undefined') {
-    const doAttach = () => {
+    const attachNow = () => {
       const wrapperEl = document.getElementById(wrapperId)
       if (!wrapperEl) return
       attachFlatpickr(
@@ -166,14 +200,13 @@ 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
-                  },
-                  value: dateString
-                }
+                currentTarget: { validity: { valid: true }, value: dateString }
               }
               formField(holdingPen, property)(fauxE)
               onchange && onchange(fauxE)
@@ -183,8 +216,15 @@ export default ({ wrapperStyle = null, holdingPen, label, placeholder, property,
         )
       )
     }
-    // Defer to next frame to ensure the element is connected
-    window.requestAnimationFrame(doAttach)
+
+    // Try immediate attach if the element is already in the DOM and connected;
+    // otherwise, defer to the next frame as a fallback.
+    const immediateEl = typeof document !== 'undefined' ? document.getElementById(wrapperId) : null
+    if (immediateEl && immediateEl.isConnected) {
+      attachNow()
+    } else {
+      window.requestAnimationFrame(attachNow)
+    }
   }
 
   return el

package/package.json

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