frontend: Fixing date time picker on change trigger logic (#3011)

The current logic is missing the scenario where the allowEmpty is true
and the value is valid, this update adds that scenario.

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

@@ -28,14 +28,11 @@ const DateTimePicker = ({ onChange, allowEmpty = false, ...props }: DateTimePick
     <MuiDateTimePicker
       renderInput={inputProps => <PaddedTextField {...inputProps} />}
       onChange={(value: Dayjs | null) => {
-        if (!allowEmpty && value && value.isValid()) {
-          const dateValue = value ? value.toDate() : null;
+        const isDateValid = value && value.isValid();
+        if (allowEmpty || (!allowEmpty && isDateValid)) {
+          const dateValue = isDateValid ? 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 valid value and allowEmpty is true", () => {
+  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: "11/16/2023 02:55 AM" },
+  });
+  expect(onChange).toHaveBeenCalled();
+});
+
 test("onChange is called when value is empty", () => {
   render(
     <ThemeProvider>