diff --git a/src/components/mui/__tests__/mui-formik-datepicker.test.js b/src/components/mui/__tests__/mui-formik-datepicker.test.js
new file mode 100644
index 000000000..2c73ee895
--- /dev/null
+++ b/src/components/mui/__tests__/mui-formik-datepicker.test.js
@@ -0,0 +1,50 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Formik, Form } from "formik";
+import "@testing-library/jest-dom";
+import MuiFormikDatepicker from "../formik-inputs/mui-formik-datepicker";
+
+const renderWithFormik = (props, initialValues = { test_date: null }) =>
+ render(
+ {
+ const errors = {};
+ if (!values.test_date) {
+ errors.test_date = "This field is required";
+ }
+ return errors;
+ }}
+ onSubmit={jest.fn()}
+ >
+
+
+ );
+
+describe("MuiFormikDatepicker", () => {
+ test("shows required marker in label", () => {
+ renderWithFormik({ required: true });
+
+ expect(screen.getByLabelText("Test Date *")).toBeInTheDocument();
+ });
+
+ test("shows validation error when blurring without value", async () => {
+ renderWithFormik({ required: true });
+
+ expect(
+ screen.queryByText("This field is required")
+ ).not.toBeInTheDocument();
+
+ const user = userEvent.setup();
+ const input = screen.getByLabelText("Test Date *");
+ await user.click(input);
+ await user.tab();
+
+ await waitFor(() => {
+ expect(screen.getByText("This field is required")).toBeInTheDocument();
+ });
+ });
+});
diff --git a/src/components/mui/formik-inputs/mui-formik-datepicker.js b/src/components/mui/formik-inputs/mui-formik-datepicker.js
index 25f403697..591ba6b24 100644
--- a/src/components/mui/formik-inputs/mui-formik-datepicker.js
+++ b/src/components/mui/formik-inputs/mui-formik-datepicker.js
@@ -8,15 +8,21 @@ import { useField } from "formik";
const MuiFormikDatepicker = ({ name, label, required, ...props }) => {
const [field, meta, helpers] = useField(name);
const requiredLabel = `${label} *`;
+ const handleBlur = () => {
+ helpers.setTouched(true, true);
+ };
+
return (
@@ -142,6 +143,7 @@ const CustomizedForm = ({
label={T.translate(
"edit_sponsor.forms_tab.customized_form.expires_at"
)}
+ required
/>