stalefish 8.0.7 → 8.0.8

package/components/dateTimePicker.mjs

@@ -154,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>
     `
@@ -164,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(
@@ -192,10 +206,7 @@ export default ({ wrapperStyle = null, holdingPen, label, placeholder, property,
             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)
@@ -205,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.7",
+  "version": "8.0.8",
   "description": "Simple function based component library for halfcab tagged template literals",
   "main": "index.mjs",
   "module": "index.mjs",