diff --git a/.changeset/fix-datetime-range-picker-enter-meridiem.md b/.changeset/fix-datetime-range-picker-enter-meridiem.md new file mode 100644 index 000000000..7f04a699d --- /dev/null +++ b/.changeset/fix-datetime-range-picker-enter-meridiem.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': patch +--- + +Keep the selected meridiem when committing a DateTimeRangePicker time with Enter. diff --git a/src/components/DatePicker/DateTimeRangePicker.test.tsx b/src/components/DatePicker/DateTimeRangePicker.test.tsx index 3d37a3be6..bbce7de6b 100644 --- a/src/components/DatePicker/DateTimeRangePicker.test.tsx +++ b/src/components/DatePicker/DateTimeRangePicker.test.tsx @@ -220,6 +220,35 @@ describe('DateTimeRangePicker', () => { ); }); + it('keeps the selected meridiem when Enter commits the time', async () => { + const handleSelectDate = vi.fn(); + + const { getByTestId, getByText } = renderCUI( + + ); + + await userEvent.click(getByTestId('datetimepicker-input')); + await userEvent.click(getByText('4')); + + const timeInput = getByTestId('date-time-picker-time-input'); + await userEvent.click(timeInput); + + // delete 0-0-:-2-1 (12:00) + await userEvent.keyboard( + '{backspace}{backspace}{backspace}{backspace}{backspace}2:37' + ); + + expect(getByTestId('datetimepicker-input').textContent).toBe( + 'Jul 04, 02:37 pm – end date' + ); + + await userEvent.keyboard('{Enter}'); + + expect(getByTestId('datetimepicker-input').textContent).toBe( + 'Jul 04, 02:37 pm – end date' + ); + }); + it('selects the end date with a time of noon', async () => { const handleSelectDate = vi.fn(); diff --git a/src/components/DatePicker/DateTimeRangePicker.tsx b/src/components/DatePicker/DateTimeRangePicker.tsx index b5931ea60..0182dd394 100644 --- a/src/components/DatePicker/DateTimeRangePicker.tsx +++ b/src/components/DatePicker/DateTimeRangePicker.tsx @@ -667,28 +667,10 @@ const TimeInput = ({ date, setDate, shouldShowSeconds, timezone }: TimeInputProp const handleKeyDown = useCallback( (event: KeyboardEvent) => { if (event.key === 'Enter') { - const { isValid, parsedDate } = parseTimeString(timeString); - - if (!isValid) { - return; - } - - if (!parsedDate) { - return; - } - - const newDate = shouldShowSeconds - ? dayjsDate - .hour(parsedDate.hour()) - .minute(parsedDate.minute()) - .second(parsedDate.second()) - .toDate() - : dayjsDate.hour(parsedDate.hour()).minute(parsedDate.minute()).toDate(); - - setDate(newDate); + handleTimeChange(timeString); } }, - [dayjsDate, setDate, shouldShowSeconds, timeString] + [handleTimeChange, timeString] ); return (