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.
This commit is contained in:
Sanaei
2026-08-15 23:35:00 +02:00
parent 3fa88adbd7
commit b53a5515d6
2 changed files with 18 additions and 1 deletions
@@ -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;
}
@@ -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;