fix: disabled panel still open when finish choose and next is disabled (#639)

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

Author: BoyYangzai

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);
     }

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"

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(