mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-08-16 08:10:58 +00:00
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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user