stalefish 8.0.5 → 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')
 
@@ -134,20 +154,7 @@ 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' } : ''} onfocus=${e => {
-  e.target.parentNode.parentNode._flatpickr && e.target.parentNode.parentNode._flatpickr.set('onValueUpdate', (fpDate, dateString) => {
-    const fauxE = {
-      currentTarget: {
-        validity: {
-          valid: true
-        },
-        value: dateString
-      }
-    }
-    formField(holdingPen, property)(fauxE)
-    onchange && onchange(fauxE)
-  })
-}} 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 => { 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>
     `
@@ -166,15 +173,27 @@ export default ({ wrapperStyle = null, holdingPen, label, placeholder, property,
         Object.assign(
           {},
           { disableMobile: resolvedDisableMobile },
+          // Provide sensible defaults for time-only pickers; allow user config to override
+          timeOnly
+            ? {
+                dateFormat: flatpickrConfig && flatpickrConfig.dateFormat ? flatpickrConfig.dateFormat : 'H:i',
+                defaultDate:
+                  flatpickrConfig && typeof flatpickrConfig.defaultDate !== 'undefined'
+                    ? flatpickrConfig.defaultDate
+                    : (holdingPen && property && holdingPen[property] ? holdingPen[property] : undefined)
+              }
+            : null,
           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.5",
+  "version": "8.0.7",
   "description": "Simple function based component library for halfcab tagged template literals",
   "main": "index.mjs",
   "module": "index.mjs",