fix: fix panel not switch when select date with open is true (#663)

Co-authored-by: dujiaqi <[email protected]>

Author: Yuiai01

src/hooks/useRangeOpen.ts

@@ -43,6 +43,10 @@ export default function useRangeOpen(
 ] {
   const [firstTimeOpen, setFirstTimeOpen] = React.useState(false);
 
+  const [afferentOpen, setAfferentOpen] = useMergedState(defaultOpen || false, {
+    value: open,
+  });
+
   const [mergedOpen, setMergedOpen] = useMergedState(defaultOpen || false, {
     value: open,
     onChange: (nextOpen) => {
@@ -62,6 +66,8 @@ export default function useRangeOpen(
     }
   }, [mergedOpen]);
 
+  const queryNextIndex = (index: number) => (index === 0 ? 1 : 0);
+
   const triggerOpen = useEvent((nextOpen: boolean, index: 0 | 1 | false, source: SourceType) => {
     if (index === false) {
       // Only when `nextOpen` is false and no need open to next index
@@ -70,7 +76,7 @@ export default function useRangeOpen(
       setMergedActivePickerIndex(index);
       setMergedOpen(nextOpen);
 
-      const nextIndex = index === 0 ? 1 : 0;
+      const nextIndex = queryNextIndex(index);
 
       // Record next open index
       if (
@@ -87,23 +93,27 @@ export default function useRangeOpen(
         }
       }
     } else if (source === 'confirm' || (source === 'blur' && changeOnBlur)) {
-      if (nextActiveIndex !== null) {
+      const customNextActiveIndex = afferentOpen ? queryNextIndex(index) : nextActiveIndex;
+
+      if (customNextActiveIndex !== null) {
         setFirstTimeOpen(false);
-        setMergedActivePickerIndex(nextActiveIndex);
+        setMergedActivePickerIndex(customNextActiveIndex);
       }
+      
       setNextActiveIndex(null);
 
       // Focus back
-      if (nextActiveIndex !== null && !disabled[nextActiveIndex]) {
+      if (customNextActiveIndex !== null && !disabled[customNextActiveIndex]) {
         raf(() => {
-          const ref = [startInputRef, endInputRef][nextActiveIndex];
+          const ref = [startInputRef, endInputRef][customNextActiveIndex];
           ref.current?.focus();
         });
       } else {
         setMergedOpen(false);
       }
     } else {
       setMergedOpen(false);
+      setAfferentOpen(false);
     }
   });
 

tests/range.spec.tsx

@@ -1921,4 +1921,10 @@ describe('Picker.Range', () => {
     expect(document.querySelector('input').value).toEqual('');
   });
 
+  it('selected date when open is true should switch panel', () => {
+    render(<MomentRangePicker open />);
+
+    fireEvent.click(document.querySelector('.rc-picker-cell'));
+    expect(document.querySelectorAll('.rc-picker-input')[1]).toHaveClass('rc-picker-input-active');
+  });
 });