diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateFieldInput.tsx index 25e452c9e980..663502ca92c3 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateFieldInput.tsx +++ b/packages/twenty-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) => { + 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, - ) => { + 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) => { + // 2 setDraftValue({ type: 'static', value: newDate?.toDateString() ?? null, diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormDateFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormDateFieldInput.stories.tsx index 2e85b40c8495..39a313fb809c 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormDateFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-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)); + }, +};