fix(DateRangePicker): fix time picker does not update when clicking t…

…he shortcut item (#3647)
rsuite · Mar 1, 2024 · 00c9eaa · 00c9eaa
1 parent 044c48f
commit 00c9eaa
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/src/DateRangePicker/DateRangePicker.tsx b/src/DateRangePicker/DateRangePicker.tsx
@@ -317,12 +317,17 @@ const DateRangePicker = React.forwardRef((props: DateRangePickerProps, ref) => {
   }: {
     dateRange: SelectedDatesState | null;
     calendarKey?: 'start' | 'end';
-    eventName?: 'changeTime' | 'changeDate' | 'changeMonth';
+    eventName?: 'changeTime' | 'changeDate' | 'changeMonth' | 'shortcutSelection';
   }) => {
     let nextValue = dateRange;
 
     // The time should remain the same when the dates in the date range are changed.
-    if (shouldRenderTime(formatStr) && dateRange?.length && eventName !== 'changeTime') {
+    if (
+      shouldRenderTime(formatStr) &&
+      dateRange?.length &&
+      eventName !== 'changeTime' &&
+      eventName !== 'shortcutSelection'
+    ) {
       const startDate = copyTime({ from: getCalendarDatetime('start'), to: dateRange[0] });
       const endDate = copyTime({
         from: getCalendarDatetime('end'),
@@ -619,7 +624,7 @@ const DateRangePicker = React.forwardRef((props: DateRangePickerProps, ref) => {
     (range: RangeType, closeOverlay = false, event: React.MouseEvent) => {
       const value = range.value as DateRange;
 
-      setCalendarDateRange({ dateRange: value });
+      setCalendarDateRange({ dateRange: value, eventName: 'shortcutSelection' });
 
       if (closeOverlay) {
         setDateRange(event, value, closeOverlay);

diff --git a/src/DateRangePicker/test/DateRangePickerSpec.tsx b/src/DateRangePicker/test/DateRangePickerSpec.tsx
@@ -974,24 +974,46 @@ describe('DateRangePicker', () => {
   });
 
   it('Should call `onShortcutClick` callback', async () => {
-    const onShortcutClickSpy = sinon.spy();
+    const onShortcutClick = sinon.spy();
 
     render(
       <DateRangePicker
         defaultOpen
         ranges={[{ label: 'Yesterday', value: [addDays(new Date(), -1), addDays(new Date(), -1)] }]}
-        onShortcutClick={onShortcutClickSpy}
+        onShortcutClick={onShortcutClick}
       />
     );
 
     userEvent.click(screen.getByRole('button', { name: 'Yesterday' }));
 
     await waitFor(() => {
-      expect(onShortcutClickSpy).to.calledOnce;
-      expect(onShortcutClickSpy.firstCall.firstArg.label).to.equal('Yesterday');
+      expect(onShortcutClick).to.calledOnce;
+      expect(onShortcutClick.firstCall.firstArg.label).to.equal('Yesterday');
     });
   });
 
+  it('Should render the correct time when the range is clicked', () => {
+    render(
+      <DateRangePicker
+        open
+        format="yyyy-MM-dd HH:mm"
+        ranges={[
+          {
+            label: 'custom range',
+            value: [new Date('2024-02-27 09:00:00'), new Date('2024-02-28 10:00:00')]
+          }
+        ]}
+      />
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'custom range' }));
+
+    const times = screen.queryAllByRole('button', { name: 'Select time' });
+
+    expect(times[0]).to.have.text('09:00');
+    expect(times[1]).to.have.text('10:00');
+  });
+
   it('Should reander the correct size', () => {
     const { rerender } = render(<DateRangePicker format="MMMM dd, yyyy" />);