fix: should not action when RangePicker set disabled (#659)

react-component · Jul 25, 2023 · 684467d · 684467d · vercel · Jul 25, 2023
1 parent f699375
commit 684467d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx
@@ -354,6 +354,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     endInputRef,
     getValue(selectedValue, 0),
     getValue(selectedValue, 1),
+    mergedDisabled,
     onOpenChange,
   );
 

diff --git a/src/hooks/useRangeOpen.ts b/src/hooks/useRangeOpen.ts
@@ -33,6 +33,7 @@ export default function useRangeOpen(
   endInputRef: React.RefObject<HTMLInputElement>,
   startSelectedValue: any,
   endSelectedValue: any,
+  disabled: [boolean, boolean],
   onOpenChange?: (open: boolean) => void,
 ): [
   open: boolean,
@@ -93,7 +94,7 @@ export default function useRangeOpen(
       setNextActiveIndex(null);
 
       // Focus back
-      if (nextActiveIndex !== null) {
+      if (nextActiveIndex !== null && !disabled[nextActiveIndex]) {
         raf(() => {
           const ref = [startInputRef, endInputRef][nextActiveIndex];
           ref.current?.focus();

diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
@@ -262,6 +262,26 @@ describe('Picker.Range', () => {
       expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeTruthy();
     });
 
+    it('should close panel when finish first choose with showTime = true and disabled = [false, true]', () => {
+      const { baseElement } = render(<MomentRangePicker showTime 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'));
+      fireEvent.click(baseElement.querySelector('.rc-picker-ok button'));
+      expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeTruthy();
+    });
+
+    it('should close panel when finish second choose with showTime = true and disabled = [true, false]', () => {
+      const { baseElement } = render(<MomentRangePicker showTime disabled={[true, false]} />);
+      expect(baseElement.querySelectorAll('.rc-picker-input')).toHaveLength(2);
+      fireEvent.click(baseElement.querySelectorAll('.rc-picker-input')[1]);
+      expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeFalsy();
+      fireEvent.click(baseElement.querySelector('.rc-picker-cell-range-start .rc-picker-cell-inner'));
+      fireEvent.click(baseElement.querySelector('.rc-picker-ok button'));
+      expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeTruthy();
+    });
+
     it('panel can not be clicked with open and disabled', () => {
       const onChange = jest.fn();
       const { baseElement } = render(<MomentRangePicker disabled open onChange={onChange} />);