DateTimePicker - trigger onChange method when value is empty (#3002)

Scope: Update onChange trigger validation to allow trigger when the
value of the DateTimePicker is empty

frontend/packages/core/src/Input/date-time.tsx

@@ -19,15 +19,22 @@ const PaddedTextField = styled(TextField)({
 });
 
 export interface DateTimePickerProps
-  extends Pick<MuiDateTimePickerProps<Date, Date>, "disabled" | "value" | "onChange" | "label"> {}
+  extends Pick<MuiDateTimePickerProps<Date, Date>, "disabled" | "value" | "onChange" | "label"> {
+  allowEmpty?: boolean;
+}
 
-const DateTimePicker = ({ onChange, ...props }: DateTimePickerProps) => (
+const DateTimePicker = ({ onChange, allowEmpty = false, ...props }: DateTimePickerProps) => (
   <LocalizationProvider dateAdapter={AdapterDayjs}>
     <MuiDateTimePicker
       renderInput={inputProps => <PaddedTextField {...inputProps} />}
       onChange={(value: Dayjs | null) => {
-        if (value && value.isValid()) {
-          onChange(value.toDate());
+        if (!allowEmpty && value && value.isValid()) {
+          const dateValue = value ? value.toDate() : null;
+          onChange(dateValue);
+        }
+
+        if (allowEmpty && !value) {
+          onChange(null);
         }
       }}
       {...props}

frontend/packages/core/src/Input/tests/date-time.test.tsx

@@ -38,6 +38,20 @@ test("onChange is called when valid value", () => {
   expect(onChange).toHaveBeenCalled();
 });
 
+test("onChange is called when value is empty", () => {
+  render(
+    <ThemeProvider>
+      <DateTimePicker value={new Date()} onChange={onChange} allowEmpty />
+    </ThemeProvider>
+  );
+
+  expect(screen.getByPlaceholderText("mm/dd/yyyy hh:mm (a|p)m")).toBeVisible();
+  fireEvent.change(screen.getByPlaceholderText("mm/dd/yyyy hh:mm (a|p)m"), {
+    target: { value: "" },
+  });
+  expect(onChange).toHaveBeenCalled();
+});
+
 test("onChange is not called when invalid value", () => {
   render(
     <ThemeProvider>
@@ -52,6 +66,20 @@ test("onChange is not called when invalid value", () => {
   expect(onChange).not.toHaveBeenCalled();
 });
 
+test("onChange is not called when value is empty and empty flag is false", () => {
+  render(
+    <ThemeProvider>
+      <DateTimePicker value={new Date()} onChange={onChange} allowEmpty={false} />
+    </ThemeProvider>
+  );
+
+  expect(screen.getByPlaceholderText("mm/dd/yyyy hh:mm (a|p)m")).toBeVisible();
+  fireEvent.change(screen.getByPlaceholderText("mm/dd/yyyy hh:mm (a|p)m"), {
+    target: { value: "" },
+  });
+  expect(onChange).not.toHaveBeenCalled();
+});
+
 test("sets passed value correctly", () => {
   const date = new Date();
   const formattedDMY = new Intl.DateTimeFormat("en-US", {