trotl-filter 1.0.50 → 1.0.51

package/dist/index.cjs.js

@@ -9593,6 +9593,22 @@ function DateTimeInput({
     return toInputString(d.getTime());
   });
 
+  // internal value for the time input.  Previously the <input> read
+  // directly from `value` which meant that when the component was
+  // controlled the field could never update until the parent passed a
+  // new prop.  By keeping a separate `timeValue` that syncs from `value` but
+  // is mutated as the user types we allow the time field to stay responsive
+  // even in controlled scenarios.
+  const [timeValue, setTimeValue] = React.useState(() => {
+    if (value) {
+      const d = new Date(value);
+      const hh = String(d.getHours()).padStart(2, '0');
+      const mm = String(d.getMinutes()).padStart(2, '0');
+      return `${hh}:${mm}`;
+    }
+    return timeStart || "";
+  });
+
   // Dropdown state & positioning
   const [open, setOpen] = React.useState(false);
   const dropdownRef = React.useRef(null);
@@ -9846,6 +9862,18 @@ function DateTimeInput({
     }
   }, [isControlled, normalizedControlledValue]);
 
+  // keep the timeValue in sync whenever the effective value or start time changes
+  React.useEffect(() => {
+    if (value) {
+      const d = new Date(value);
+      const hh = String(d.getHours()).padStart(2, '0');
+      const mm = String(d.getMinutes()).padStart(2, '0');
+      setTimeValue(`${hh}:${mm}`);
+    } else {
+      setTimeValue(timeStart || '');
+    }
+  }, [value, timeStart]);
+
   // Formatting display (similar to RangePicker)
   const formatDisplay = () => {
     if (!value) return "";
@@ -9942,12 +9970,18 @@ function DateTimeInput({
   };
   const handleTimeChange = e => {
     const t = e.target.value; // HH:mm
-    if (!value) return;
-    const d = new Date(value);
+    setTimeValue(t);
+    // determine base date: prefer current value, fall back to now
+    const baseDate = value ? new Date(value) : new Date();
     const [h, m] = t.split(":");
-    d.setHours(Number(h), Number(m), 0, 0);
-    const str = toInputString(d.getTime());
-    if (!isControlled) setValue(str);
+    baseDate.setHours(Number(h), Number(m), 0, 0);
+    const str = toInputString(baseDate.getTime());
+    // always update local `value` so the dropdown display keeps up
+    if (!isControlled) {
+      setValue(str);
+    } else {
+      setValue(str);
+    }
     setUrlParam(str);
     onChange?.(str);
   };
@@ -10125,13 +10159,7 @@ function DateTimeInput({
     }
   }, "Time:"), /*#__PURE__*/React.createElement("input", {
     type: "time",
-    value: (() => {
-      if (!value) return '';
-      const d = new Date(value);
-      const hh = String(d.getHours()).padStart(2, '0');
-      const mm = String(d.getMinutes()).padStart(2, '0');
-      return `${hh}:${mm}`;
-    })(),
+    value: timeValue,
     onChange: handleTimeChange,
     className: "basic-input",
     disabled: disabled,