fix: preserve pending range selection on hover

src/PickerInput/Popup/PopupPanel.tsx

@@ -14,6 +14,7 @@ export type PopupPanelProps<DateType extends object = any> = MustProp<DateType>
   FooterProps<DateType> & {
     multiplePanel?: boolean;
     range?: boolean;
+    cellHoverValue?: DateType[];
 
     onPickerValueChange: (date: DateType) => void;
   };
@@ -30,6 +31,7 @@ export default function PopupPanel<DateType extends object = any>(
     onSubmit,
     range,
     hoverValue,
+    cellHoverValue,
   } = props;
   const { prefixCls, generateConfig } = React.useContext(PickerContext);
 
@@ -72,6 +74,7 @@ export default function PopupPanel<DateType extends object = any>(
 
   if (range) {
     pickerProps.hoverRangeValue = hoverValue;
+    pickerProps.hoverValue = cellHoverValue;
   } else {
     pickerProps.hoverValue = hoverValue;
   }

src/PickerInput/RangePicker.tsx

@@ -331,6 +331,7 @@ function RangePicker<DateType extends object = any>(
     triggeredFields,
     triggerRangeValueChange,
     resetRangeValueChange,
+    currentFieldModified,
   ] = useRangeValueChange(
     enabledFieldCount,
     needConfirm,
@@ -502,6 +503,10 @@ function RangePicker<DateType extends object = any>(
     return internalHoverValues || calendarValue;
   }, [calendarValue, internalHoverValues]);
 
+  const keepCurrentSelection = needConfirm && currentFieldModified && hoverSource === 'cell';
+  const panelHoverValues = keepCurrentSelection ? calendarValue : hoverValues;
+  const activeHoverValue = internalHoverValues?.[activeIndex];
+
   // Clean up `internalHoverValues` when closed
   React.useEffect(() => {
     if (!mergedOpen) {
@@ -640,7 +645,8 @@ function RangePicker<DateType extends object = any>(
       defaultOpenValue={toArray(showTime?.defaultOpenValue)[activeIndex]}
       onPickerValueChange={setCurrentPickerValue}
       // Hover
-      hoverValue={hoverValues}
+      hoverValue={panelHoverValues}
+      cellHoverValue={keepCurrentSelection && activeHoverValue ? [activeHoverValue] : null}
       onHover={onPanelHover}
       // Submit
       needConfirm={needConfirm}

src/PickerInput/hooks/useRangeValueChange.ts

@@ -59,6 +59,7 @@ export type UseRangeValueChangeReturn<FieldValue> = [
   triggeredFields: number[],
   triggerChange: TriggerChange<FieldValue>,
   reset: VoidFunction,
+  currentFieldModified: boolean,
 ];
 
 interface TriggeredField {
@@ -509,6 +510,9 @@ export default function useRangeValueChange<FieldValue = unknown>(
   lastValidIndexRef.current = currentIndex ?? lastValidIndexRef.current ?? 0;
 
   const triggeredFields = triggeredFieldsRef.current.map((field) => field.index);
+  const currentFieldModified = triggeredFieldsRef.current.some(
+    (field) => field.index === currentIndex && field.modified,
+  );
 
   return [
     currentIndex,
@@ -517,5 +521,6 @@ export default function useRangeValueChange<FieldValue = unknown>(
     triggeredFields,
     triggerChange,
     reset,
+    currentFieldModified,
   ];
 }

tests/range.spec.tsx

@@ -768,6 +768,22 @@ describe('Picker.Range', () => {
         expect(findCell(end)).not.toHaveClass('rc-picker-cell-range-end');
       });
     });
+
+    it('should keep the pending selection when hovering with confirmation', async () => {
+      const { container } = render(<DayRangePicker showTime />);
+      openPicker(container);
+      selectCell(11);
+
+      expect(findCell(11)).toHaveClass('rc-picker-cell-range-start');
+
+      fireEvent.mouseEnter(findCell(22));
+      await waitFakeTimer();
+
+      expect(container.querySelectorAll('input')[0]).toHaveValue('1990-09-22 00:00:00');
+      expect(findCell(11)).toHaveClass('rc-picker-cell-range-start');
+      expect(findCell(22)).toHaveClass('rc-picker-cell-hover');
+      expect(findCell(22)).not.toHaveClass('rc-picker-cell-range-start');
+    });
   });
 
   it('should close when user focus out', () => {