fix: keep the input state when clicking outside of the picker or pres…

…sing Esc
twentyhq · Dec 13, 2024 · 7bd6af6 · 7bd6af6
1 parent fcd20cc
commit 7bd6af6
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 35 deletions.
diff --git a/...front/src/modules/object-record/record-field/form-types/components/FormDateFieldInput.tsx b/...front/src/modules/object-record/record-field/form-types/components/FormDateFieldInput.tsx
@@ -142,51 +142,22 @@ export const FormDateFieldInput = ({
 
   const handlePickerEnter = () => {};
 
-  const handlePickerEscape = (newDate: Nullable<Date>) => {
+  const handlePickerEscape = () => {
+    // FIXME: Escape key is not handled properly by the underlying DateInput component. We need to solve that.
+
     setDraftValue({
       type: 'static',
-      value: newDate?.toDateString() ?? null,
+      value: draftValue.value,
       mode: 'view',
     });
-
-    setTemporaryValue(newDate);
-
-    setInputDateTime(
-      isDefined(newDate)
-        ? parseDateToString({
-            date: newDate,
-            isDateTimeInput: false,
-            userTimezone: timeZone,
-          })
-        : '',
-    );
-
-    persistDate(newDate);
   };
 
-  const handlePickerClickOutside = (
-    _event: MouseEvent | TouchEvent,
-    newDate: Nullable<Date>,
-  ) => {
+  const handlePickerClickOutside = () => {
     setDraftValue({
       type: 'static',
-      value: newDate?.toDateString() ?? null,
+      value: draftValue.value,
       mode: 'view',
     });
-
-    setTemporaryValue(newDate);
-
-    setInputDateTime(
-      isDefined(newDate)
-        ? parseDateToString({
-            date: newDate,
-            isDateTimeInput: false,
-            userTimezone: timeZone,
-          })
-        : '',
-    );
-
-    persistDate(newDate);
   };
 
   const handlePickerClear = () => {
@@ -204,6 +175,7 @@ export const FormDateFieldInput = ({
   };
 
   const handlePickerSubmit = (newDate: Nullable<Date>) => {
+    // 2
     setDraftValue({
       type: 'static',
       value: newDate?.toDateString() ?? null,

diff --git a/...ject-record/record-field/form-types/components/__stories__/FormDateFieldInput.stories.tsx b/...ject-record/record-field/form-types/components/__stories__/FormDateFieldInput.stories.tsx
@@ -332,3 +332,39 @@ export const SwitchesToStandaloneVariable: Story = {
     ]);
   },
 };
+
+export const ClickingOutsideDoesNotResetInputState: Story = {
+  args: {
+    label: 'Created At',
+    defaultValue: '2024-12-09T13:20:19.631Z',
+    onPersist: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const defaultValueAsDisplayString = parseDateToString({
+      date: new Date(args.defaultValue!),
+      isDateTimeInput: false,
+      userTimezone: undefined,
+    });
+
+    const canvas = within(canvasElement);
+
+    const input = await canvas.findByPlaceholderText('mm/dd/yyyy');
+    expect(input).toBeVisible();
+    expect(input).toHaveDisplayValue(defaultValueAsDisplayString);
+
+    await userEvent.type(input, '{Backspace}{Backspace}');
+
+    const datePicker = await canvas.findByRole('dialog');
+    expect(datePicker).toBeVisible();
+
+    await Promise.all([
+      userEvent.click(canvasElement),
+
+      waitForElementToBeRemoved(datePicker),
+    ]);
+
+    expect(args.onPersist).not.toHaveBeenCalled();
+
+    expect(input).toHaveDisplayValue(defaultValueAsDisplayString.slice(0, -2));
+  },
+};