fix(date-field): handle undefined and falsy values (refinedev#6217)

Co-authored-by: Ali Emir Şen <senaliemir@gmail.com>
YusukeSano · Aug 1, 2024 · aefd093 · aefd093
1 parent 77f2ee8
commit aefd093
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 12 deletions.
diff --git a/.changeset/silly-lions-destroy.md b/.changeset/silly-lions-destroy.md
@@ -0,0 +1,12 @@
+---
+"@refinedev/chakra-ui": patch
+"@refinedev/mantine": patch
+"@refinedev/antd": patch
+"@refinedev/mui": patch
+---
+
+fix(date-field): falsy values should render empty string
+
+Previously, `<DateField value={undefined} />` was rendering the current date. After this change, it will render empty string if a falsy value is provided.
+
+[Resolves #6216](https://github.com/refinedev/refine/issues/6216)
diff --git a/packages/antd/src/components/fields/date/index.tsx b/packages/antd/src/components/fields/date/index.tsx
@@ -23,9 +23,11 @@ export const DateField: React.FC<DateFieldProps> = ({
 
   return (
     <Typography.Text {...rest}>
-      {dayjs(value)
-        .locale(locales || defaultLocale)
-        .format(dateFormat)}
+      {value
+        ? dayjs(value)
+            .locale(locales || defaultLocale)
+            .format(dateFormat)
+        : ""}
     </Typography.Text>
   );
 };
diff --git a/packages/chakra-ui/src/components/fields/date/index.tsx b/packages/chakra-ui/src/components/fields/date/index.tsx
@@ -25,9 +25,11 @@ export const DateField: React.FC<DateFieldProps> = ({
 }) => {
   return (
     <Text {...rest}>
-      {dayjs(value)
-        .locale(locales || defaultLocale)
-        .format(dateFormat)}
+      {value
+        ? dayjs(value)
+            .locale(locales || defaultLocale)
+            .format(dateFormat)
+        : ""}
     </Text>
   );
 };
diff --git a/packages/mantine/src/components/fields/date/index.tsx b/packages/mantine/src/components/fields/date/index.tsx
@@ -25,9 +25,11 @@ export const DateField: React.FC<DateFieldProps> = ({
 }) => {
   return (
     <Text {...rest}>
-      {dayjs(value)
-        .locale(locales || defaultLocale)
-        .format(dateFormat)}
+      {value
+        ? dayjs(value)
+            .locale(locales || defaultLocale)
+            .format(dateFormat)
+        : ""}
     </Text>
   );
 };
diff --git a/packages/mui/src/components/fields/date/index.tsx b/packages/mui/src/components/fields/date/index.tsx
@@ -26,9 +26,11 @@ export const DateField: React.FC<DateFieldProps> = ({
 }) => {
   return (
     <Typography variant="body2" {...rest}>
-      {dayjs(value)
-        .locale(locales || defaultLocale)
-        .format(dateFormat)}
+      {value
+        ? dayjs(value)
+            .locale(locales || defaultLocale)
+            .format(dateFormat)
+        : ""}
     </Typography>
   );
 };
diff --git a/packages/ui-tests/src/tests/fields/date.tsx b/packages/ui-tests/src/tests/fields/date.tsx
@@ -39,6 +39,22 @@ export const fieldDateTests = (
       getByText("5/20/2021");
     });
 
+    it("renders empty with given null", () => {
+      const { getByTestId } = render(
+        <DateField value={null} data-testid="date-field" />,
+      );
+
+      expect(getByTestId("date-field").textContent).toBe("");
+    });
+
+    it("renders empty with given undefined", () => {
+      const { getByTestId } = render(
+        <DateField value={undefined} data-testid="date-field" />,
+      );
+
+      expect(getByTestId("date-field").textContent).toBe("");
+    });
+
     it("renders invalid date with given incorrect date", () => {
       const { getByText } = render(<DateField value={new Date("test")} />);