1
0
Эх сурвалжийг харах

fix(frontend): make the jalali expiry clear button actually clear

persian-calendar-suite seeds today's date and emits it whenever it mounts
without a value. Clearing the expiry remounts the picker with a null value,
so the library immediately fired onChange(today) and the date came straight
back — and it also painted that seeded date into its read-only input.

Swallow the mount-time emit (re-armed on every clear-remount) and hide the
seeded text while the value is empty, so a cleared expiry stays empty and a
fresh client/inbound form no longer silently adopts today as its expiry.
Sanaei 7 цаг өмнө
parent
commit
b53a5515d6

+ 6 - 0
frontend/src/components/form/DateTimePicker.css

@@ -69,3 +69,9 @@
 .jdp-ultra .jdp-clear:hover {
   color: rgba(255, 255, 255, 0.45);
 }
+
+/* With no value the library still paints today's date into its readOnly input;
+   hide it so an empty (or just-cleared) expiry actually looks empty. */
+.jdp-wrap.jdp-empty input {
+  color: transparent !important;
+}

+ 12 - 1
frontend/src/components/form/DateTimePicker.tsx

@@ -61,6 +61,16 @@ export default function DateTimePicker({
   // Bumped on clear: persian-calendar-suite reads `value` only on mount, so
   // remounting via key is the only way to reflect an externally cleared value.
   const [clearNonce, setClearNonce] = useState(0);
+  // Mounted without a value, persian-calendar-suite seeds today and emits it —
+  // which would instantly undo a clear. Armed across every (re)mount.
+  const suppressMountEmit = useRef(true);
+
+  useEffect(() => {
+    suppressMountEmit.current = false;
+    return () => {
+      suppressMountEmit.current = true;
+    };
+  }, [clearNonce]);
 
   const persianTheme = useMemo(() => {
     if (isUltra) return ULTRA_DARK_THEME;
@@ -80,11 +90,12 @@ export default function DateTimePicker({
 
   if (datepicker === 'jalalian') {
     return (
-      <div ref={jalaliRef} className={`jdp-wrap${isDark ? ' jdp-dark' : ''}${isUltra ? ' jdp-ultra' : ''}${disabled ? ' jdp-disabled' : ''}`}>
+      <div ref={jalaliRef} className={`jdp-wrap${isDark ? ' jdp-dark' : ''}${isUltra ? ' jdp-ultra' : ''}${disabled ? ' jdp-disabled' : ''}${value ? '' : ' jdp-empty'}`}>
         <PersianDateTimePicker
           key={clearNonce}
           value={value ? value.valueOf() : null}
           onChange={(next: number | string | null) => {
+            if (suppressMountEmit.current) return;
             if (next == null || next === '') {
               onChange(null);
               return;