[@mantine/dates] DatePicker: Fix incorrect handling of receiving part…

…ial value when `type="range"` (#7278)
mantinedev · Dec 23, 2024 · 8406155 · 8406155
1 parent 358c3dd
commit 8406155
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/packages/@mantine/dates/src/components/DatePicker/DatePicker.story.tsx b/packages/@mantine/dates/src/components/DatePicker/DatePicker.story.tsx
@@ -15,6 +15,17 @@ export function Usage() {
   );
 }
 
+export function RangedSetPartial() {
+  const [value, setValue] = useState<[Date | null, Date | null]>([new Date(), null]);
+
+  return (
+    <div style={{ padding: 40 }}>
+      <DatePicker type="range" value={value} onChange={setValue} />
+      <Button onClick={() => setValue([new Date(), null])}>Set initial range</Button>
+    </div>
+  );
+}
+
 export function HideOutsideDates() {
   return (
     <div style={{ padding: 40 }}>

diff --git a/packages/@mantine/dates/src/hooks/use-dates-state/use-dates-state.ts b/packages/@mantine/dates/src/hooks/use-dates-state/use-dates-state.ts
@@ -166,11 +166,15 @@ export function useDatesState<Type extends DatePickerType = 'default'>({
       return;
     }
 
-    const isNeitherSelected = _value[0] == null && _value[1] == null;
-    const isBothSelected = _value[0] != null && _value[1] != null;
-    if (isNeitherSelected || isBothSelected) {
-      setPickedDate(null);
-      setHoveredDate(null);
+    if (_value[0] && !_value[1]) {
+      setPickedDate(_value[0]);
+    } else {
+      const isNeitherSelected = _value[0] == null && _value[1] == null;
+      const isBothSelected = _value[0] != null && _value[1] != null;
+      if (isNeitherSelected || isBothSelected) {
+        setPickedDate(null);
+        setHoveredDate(null);
+      }
     }
   }, [_value]);