fix(DateRangePicker): fix not updating time on calendar when typing t…

…o change time (#3777)
rsuite · May 2, 2024 · d1a7350 · d1a7350
1 parent 2585d71
commit d1a7350
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/src/DateRangePicker/DateRangePicker.tsx b/src/DateRangePicker/DateRangePicker.tsx
@@ -291,7 +291,7 @@ const DateRangePicker = React.forwardRef((props: DateRangePickerProps, ref) => {
   );
 
   // The date of the current hover, used to reduce the calculation of `handleMouseMove`
-  const [hoverDateRange, setHoverDateRange] = useState<DateRange | null>(null);
+  const [hoverDateRange, setHoverDateRange] = useState<DateRange | null>(value);
 
   // The displayed calendar panel is rendered based on this value.
   const [calendarDate, setCalendarDate] = useState<DateRange>(
@@ -335,8 +335,7 @@ const DateRangePicker = React.forwardRef((props: DateRangePickerProps, ref) => {
     if (
       shouldRenderTime(formatStr) &&
       dateRange?.length &&
-      eventName !== 'changeTime' &&
-      eventName !== 'shortcutSelection'
+      (eventName === 'changeDate' || eventName === 'changeMonth')
     ) {
       const startDate = copyTime({ from: getCalendarDatetime('start'), to: dateRange[0] });
       const endDate = copyTime({
@@ -947,11 +946,11 @@ const DateRangePicker = React.forwardRef((props: DateRangePickerProps, ref) => {
               format={formatStr}
               placeholder={placeholder ? placeholder : rangeFormatStr}
               disabled={disabled}
-              onChange={handleInputChange}
               readOnly={readOnly || !editable || loading}
               plaintext={plaintext}
-              onKeyDown={handleInputKeyDown}
               htmlSize={getInputHtmlSize()}
+              onChange={handleInputChange}
+              onKeyDown={handleInputKeyDown}
             />
             <PickerIndicator
               loading={loading}

diff --git a/src/DateRangePicker/test/DateRangePickerSpec.tsx b/src/DateRangePicker/test/DateRangePickerSpec.tsx
@@ -1188,4 +1188,28 @@ describe('DateRangePicker', () => {
       expect(screen.getByTestId('daterange-header')).to.have.class('rs-picker-tab-active-start');
     });
   });
+
+  it('Should update time when entering time via keyboard', () => {
+    render(
+      <DateRangePicker
+        open
+        format="HH"
+        defaultValue={[new Date('2024-02-27 09:00:00'), new Date('2024-02-28 10:00:00')]}
+      />
+    );
+
+    const times = screen.queryAllByRole('button', { name: 'Select time' });
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    expect(times[0]).to.have.text('09');
+    expect(times[1]).to.have.text('10');
+    expect(input).to.have.value('09 ~ 10');
+
+    userEvent.type(input, '{arrowdown}{arrowdown}');
+
+    expect(times[0]).to.have.text('07');
+    expect(times[1]).to.have.text('10');
+    expect(input).to.have.value('07 ~ 10');
+    expect(screen.getByTestId('daterange-header')).to.have.text('07 ~ 10');
+  });
 });