From 12e84daee5e522699f76216bcc9c4cc6a84840ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B4=8B?= <hetongyang@bytedance.com>
Date: Tue, 23 May 2023 19:22:28 +0800
Subject: [PATCH] fix: disabled panel still open when finish choose and next is
 disabled

---
 src/RangePicker.tsx                     |  7 ++++++-
 tests/__snapshots__/range.spec.tsx.snap |  6 +++---
 tests/range.spec.tsx                    | 16 ++++++++++++++++
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx
index fae8f42d3..0a41702d0 100644
--- a/src/RangePicker.tsx
+++ b/src/RangePicker.tsx
@@ -1102,7 +1102,12 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
       }
 
       // Switch
-      triggerOpen(false, mergedActivePickerIndex, 'confirm');
+      const nextActivePickerIndex = mergedActivePickerIndex === 0 ? 1 : 0;
+      if (mergedDisabled[nextActivePickerIndex]) {
+        triggerOpen(false, false, 'confirm');
+      } else {
+        triggerOpen(false, mergedActivePickerIndex, 'confirm');
+      }
     } else {
       setSelectedValue(values);
     }
diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap
index 43bc750bc..820a81c6f 100644
--- a/tests/__snapshots__/range.spec.tsx.snap
+++ b/tests/__snapshots__/range.spec.tsx.snap
@@ -136,7 +136,7 @@ exports[`Picker.Range panelRender 1`] = `
   <div>
     <div
       class="rc-picker-dropdown rc-picker-dropdown-range rc-picker-dropdown-placement-bottomLeft"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
     >
       <div
         class="rc-picker-range-wrapper rc-picker-date-range-wrapper"
@@ -201,7 +201,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
   <div>
     <div
       class="rc-picker-dropdown rc-picker-dropdown-range rc-picker-dropdown-placement-bottomLeft"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
     >
       <div
         class="rc-picker-range-wrapper rc-picker-date-range-wrapper"
@@ -1161,7 +1161,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
   <div>
     <div
       class="rc-picker-dropdown rc-picker-dropdown-range rc-picker-dropdown-placement-bottomLeft"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
     >
       <div
         class="rc-picker-range-wrapper rc-picker-month-range-wrapper"
diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
index 9ee5c4a5a..f56e4f84d 100644
--- a/tests/range.spec.tsx
+++ b/tests/range.spec.tsx
@@ -238,12 +238,28 @@ describe('Picker.Range', () => {
   });
 
   describe('disabled', () => {
+    it('should no panel open with disabled', () => {
+      const { baseElement } = render(<MomentRangePicker disabled />);
+      expect(baseElement.querySelectorAll('.rc-picker-input')).toHaveLength(2);
+      fireEvent.click(baseElement.querySelector('.rc-picker-input'));
+      expect(baseElement.querySelector('.rc-picker-dropdown')).toBeFalsy();
+    });
+
     it('basic disabled check', () => {
       const { container } = render(<MomentRangePicker disabled={[true, false]} />);
       expect(container.querySelectorAll('input')[0].disabled).toBeTruthy();
       expect(container.querySelectorAll('input')[1].disabled).toBeFalsy();
     });
 
+    it('should close panel when finish choose panel and next is disabled with disabled = [false, true]/[true,false]', () => {
+      const { baseElement, container } = render(<MomentRangePicker disabled={[false, true]} />);
+      expect(baseElement.querySelectorAll('.rc-picker-input')).toHaveLength(2);
+      fireEvent.click(baseElement.querySelectorAll('.rc-picker-input')[0]);
+      expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeFalsy();
+      fireEvent.click(baseElement.querySelector('.rc-picker-cell-inner'));
+      expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeTruthy();
+    });
+
     it('startDate will have disabledDate when endDate is not selectable', () => {
       const onChange = jest.fn();
       const { container } = render(