Skip to content

Commit

Permalink
fix: keep the input state when clicking outside of the picker or pres…
Browse files Browse the repository at this point in the history
…sing Esc
  • Loading branch information
Devessier committed Dec 13, 2024
1 parent e7a8f6f commit 18420d4
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 35 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand All @@ -204,6 +175,7 @@ export const FormDateFieldInput = ({
};

const handlePickerSubmit = (newDate: Nullable<Date>) => {
// 2
setDraftValue({
type: 'static',
value: newDate?.toDateString() ?? null,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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));
},
};

0 comments on commit 18420d4

Please sign in to comment.