feat(DateTimePicker): optimize onChange handling with ref for improved performance

2026-03-04 13:25:53 +01:00
parent bb4da19f4f
commit 6aa01d39f4
2 changed files with 6 additions and 3 deletions
@@ -30,6 +30,9 @@ export default function DateTimePicker({
 }) {
  const inputRef = useRef(null);
  const fpRef = useRef(null);
+  // Always keep a current ref to onChange so flatpickr's closure never goes stale
+  const onChangeRef = useRef(onChange);
+  useEffect(() => { onChangeRef.current = onChange; });

  useEffect(() => {
    if (!inputRef.current) return;
@@ -44,14 +47,14 @@ export default function DateTimePicker({
      appendTo: document.body,       // portal to body → never clipped
      static: false,
      onChange: (selectedDates) => {
-        if (selectedDates.length === 0) { onChange(''); return; }
+        if (selectedDates.length === 0) { onChangeRef.current(''); return; }
        const d = selectedDates[0];
        const y = d.getFullYear();
        const mo = String(d.getMonth() + 1).padStart(2, '0');
        const day = String(d.getDate()).padStart(2, '0');
        const h = String(d.getHours()).padStart(2, '0');
        const mi = String(d.getMinutes()).padStart(2, '0');
-        onChange(`${y}-${mo}-${day}T${h}:${mi}`);
+        onChangeRef.current(`${y}-${mo}-${day}T${h}:${mi}`);
      },
    });