fix: rang-picker should not trigger on disabledDate by keyboard (#310)

* refactor: code style * fix: rang-picker should not trigger on disabledDate by keyboard
jinshuju · Dec 10, 2021 · 77a271d · 77a271d
1 parent 13e10ec
commit 77a271d
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git a/examples/range.tsx b/examples/range.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import moment, { Moment } from 'moment';
+import type { Moment } from 'moment';
+import moment from 'moment';
 import RangePicker from '../src/RangePicker';
 import momentGenerateConfig from '../src/generate/moment';
 import zhCN from '../src/locale/zh_CN';
@@ -40,6 +41,11 @@ export default () => {
 
   const rangePickerRef = React.useRef<RangePicker<Moment>>(null);
 
+  const now = momentGenerateConfig.getNow();
+  const disabledDate = (current: Moment) => {
+    return current.diff(now, 'days') > 1 || current.diff(now, 'days') < -1;
+  };
+
   return (
     <div>
       <h2>Value: {value ? `${formatDate(value[0])} ~ ${formatDate(value[1])}` : 'null'}</h2>
@@ -67,7 +73,7 @@ export default () => {
             ranges={{
               ranges: [moment(), moment().add(10, 'day')],
             }}
-            onOk={dates => {
+            onOk={(dates) => {
               console.log('OK!!!', dates);
             }}
           />
@@ -162,6 +168,16 @@ export default () => {
             placeholder={['start...', 'end...']}
           />
         </div>
+        <div style={{ margin: '0 8px' }}>
+          <h3>DisabledDate</h3>
+          <RangePicker<Moment>
+            {...sharedProps}
+            value={undefined}
+            locale={zhCN}
+            placeholder={['start...', 'end...']}
+            disabledDate={disabledDate}
+          />
+        </div>
       </div>
     </div>
   );

diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx
@@ -603,6 +603,15 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
       triggerOpen(newOpen, index);
     },
     onSubmit: () => {
+      if (
+        // When user typing disabledDate with keyboard and enter, this value will be empty
+        !selectedValue ||
+        // Normal disabled check
+        (disabledDate && disabledDate(selectedValue[index]))
+      ) {
+        return false;
+      }
+
       triggerChange(selectedValue, index);
       resetText();
     },

diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
@@ -4,6 +4,7 @@ import { act } from 'react-dom/test-utils';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import type { Moment } from 'moment';
+import moment from 'moment';
 import type { Wrapper } from './util/commonUtil';
 import { mount, getMoment, isSame, MomentRangePicker } from './util/commonUtil';
 import zhCN from '../src/locale/zh_CN';
@@ -1544,4 +1545,28 @@ describe('Picker.Range', () => {
     wrapper.simulate('mouseleave');
     expect(handleMouseLeave).toHaveBeenCalled();
   });
+
+  // https://github.com/ant-design/ant-design/issues/31334
+  it('keyboard should not trigger on disabledDate', () => {
+    const onCalendarChange = jest.fn();
+    const now = moment();
+    const disabledDate = (current: Moment) => {
+      return current.diff(now, 'days') > 1 || current.diff(now, 'days') < -1;
+    };
+    const wrapper = mount(
+      <MomentRangePicker onCalendarChange={onCalendarChange} disabledDate={disabledDate} />,
+    );
+    wrapper.find('input').first().simulate('focus');
+    wrapper.keyDown(KeyCode.ENTER);
+    wrapper.keyDown(KeyCode.TAB);
+    // Make sure the selected value is disabledDate. Because only a few values are disabledDate
+    wrapper.keyDown(KeyCode.DOWN);
+    wrapper.keyDown(KeyCode.DOWN);
+    wrapper.keyDown(KeyCode.DOWN);
+    wrapper.keyDown(KeyCode.DOWN);
+    wrapper.keyDown(KeyCode.DOWN);
+    wrapper.keyDown(KeyCode.DOWN);
+    wrapper.keyDown(KeyCode.ENTER);
+    expect(onCalendarChange).not.toHaveBeenCalled();
+  });
 });