[@mantine/dates] DateInput: Fix defaultDate prop not working when t…

…he value is set to `null` (#4426)
mantinedev · Nov 16, 2024 · eebc06a · eebc06a
1 parent 5af034c
commit eebc06a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/packages/@mantine/dates/src/components/DateInput/DateInput.story.tsx b/packages/@mantine/dates/src/components/DateInput/DateInput.story.tsx
@@ -21,6 +21,20 @@ export function Usage() {
   );
 }
 
+export function WithDefaultDate() {
+  const [value, setValue] = useState<Date | null>(null);
+  return (
+    <div style={{ padding: 40, maxWidth: 400 }}>
+      <DateInput
+        placeholder="Enter date"
+        value={value}
+        onChange={setValue}
+        defaultDate={new Date(1994, 1, 2)}
+      />
+    </div>
+  );
+}
+
 export function CloseButton() {
   return (
     <div style={{ padding: 40, maxWidth: 400 }}>

diff --git a/packages/@mantine/dates/src/components/DateInput/DateInput.tsx b/packages/@mantine/dates/src/components/DateInput/DateInput.tsx
@@ -166,7 +166,7 @@ export const DateInput = factory<DateInputFactory>((_props, ref) => {
   });
 
   useEffect(() => {
-    if (controlled) {
+    if (controlled && value !== null) {
       setDate(value!);
     }
   }, [controlled, value]);
@@ -294,7 +294,7 @@ export const DateInput = factory<DateInputFactory>((_props, ref) => {
               locale={locale}
               getDayProps={_getDayProps}
               size={inputProps.size as MantineSize}
-              date={_date!}
+              date={_date}
               onDateChange={setDate}
             />
           </Popover.Dropdown>