fix(datepicker): can not close panel when preset dates is null or undefined #388

packages/semi-foundation/datePicker/foundation.ts

@@ -745,7 +745,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         let inputValue;
         if (!this._someDateDisabled(changedDates)) {
             inputValue = this._isMultiple() ? this.formatMultipleDates(dates) : this.formatDates(dates);
-            const isRangeTypeAndInputIncomplete = this._isRangeType() && (isNullOrUndefined(dates[0]) || isNullOrUndefined(dates[1]));
+            const isRangeTypeAndInputIncomplete = this._isRangeType() && !this._isRangeValueComplete(dates);
             /**
              * If the input is incomplete when under control, the notifyChange is not triggered because
              * You need to update the value of the input box, otherwise there will be a problem that a date is selected but the input box does not show the date #1357
@@ -1024,11 +1024,9 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     };
 
     _isRangeValueComplete = (value: Date[] | Date) => {
-        let result = true;
+        let result = false;
         if (Array.isArray(value)) {
             result = !value.some(date => isNullOrUndefined(date));
-        } else {
-            result = false;
         }
         return result;
     };

packages/semi-ui/datePicker/__test__/datePicker.test.js

@@ -968,6 +968,71 @@ describe(`DatePicker`, () => {
 
     it('test month sync change dateRange type', () => { testMonthSyncChange('dateRange') });
     it('test month sync change dateTimeRange type', () => { testMonthSyncChange('dateTimeRange')});
+
+    it(`test preset given null`, async () => {
+        const props = {
+            presets: [
+                {
+                    text: 'Today',
+                    start: null,
+                    end: null,
+                }
+            ],
+            defaultValue: baseDate,
+            defaultOpen: true,
+            motion: false,
+            type: 'dateRange'
+        }
+        const handleChange = sinon.spy();
+        const demo = mount(<DatePicker {...props} onChange={handleChange} />);
+        const elem = demo.find(BaseDatePicker);
+
+        const btns = document.querySelectorAll('.semi-datepicker-quick-control-item');
+
+        btns[0].click();
+        expect(handleChange.called).toBeTruthy();
+        const args = handleChange.getCall(0).args;
+        expect(args[0].length).toEqual(0);
+        expect(elem.state('panelShow')).toBeFalsy();
+    });
+
+    it(`test preset given null + needConfirm`, async () => {
+        const props = {
+            presets: [
+                {
+                    text: 'Today',
+                    start: null,
+                    end: null,
+                }
+            ],
+            defaultValue: baseDate,
+            defaultOpen: true,
+            motion: false,
+            type: 'dateTimeRange',
+            needConfirm: true,
+        }
+        const handleChange = sinon.spy();
+        const handleConfirm = sinon.spy();
+        const demo = mount(<DatePicker {...props} onChange={handleChange} onConfirm={handleConfirm} />);
+        const elem = demo.find(BaseDatePicker);
+
+        const btns = document.querySelectorAll('.semi-datepicker-quick-control-item');
+
+        // 点击 preset
+        btns[0].click();
+        expect(handleChange.called).toBe(true);
+        const argsChange = handleChange.getCall(0).args;
+        expect(argsChange[0].length).toBe(0);
+        expect(elem.state('panelShow')).toBe(true);
+        // 点击确定
+        const footerBtns = document.querySelectorAll('.semi-datepicker-footer .semi-button');
+        footerBtns[1].click();
+        expect(handleConfirm.called).toBe(true);
+        const argsConfirm = handleConfirm.getCall(0).args;
+        expect(argsConfirm[0].length).toBe(0);
+        expect(elem.state('panelShow')).toBe(false);
+    });
+    
     it('test dateRange triggerRender', async () => {
         const elem = mount(
             <DatePicker

packages/semi-ui/datePicker/_story/datePicker.stories.js

@@ -724,6 +724,50 @@ export const FixNeedConfirm = () => {
 }
 FixNeedConfirm.storyName = '修复 needConfirm 取消后输入框显示错误';
 
+/**
+ * fix https://github.com/DouyinFE/semi-design/issues/388
+ */
+export const FixPresetsClick = () => {
+  const presets = [
+    {
+      text: '清空',
+      start: '',
+      end: '',
+    },
+    {
+      text: 'Tomorrow',
+      start: new Date(new Date().valueOf() + 1000 * 3600 * 24),
+      end: new Date(new Date().valueOf() + 1000 * 3600 * 24),
+    },
+  ];
+
+  const handleChange = v => {
+    console.log('change', v);
+  };
+
+  const handleConfirm = v => {
+    console.log('confirm', v);
+  }
+
+  return (
+    <div>
+      <div>
+        <label>
+          <span>不设置 needConfirm</span>
+          <DatePicker onChange={console.log} type="dateRange" presets={presets} />
+        </label>
+      </div>
+      <div>
+        <label>
+          <span>设置 needConfirm</span>
+          <DatePicker needConfirm onChange={handleChange} onConfirm={handleConfirm} type="dateTimeRange" presets={presets} />
+        </label>
+      </div>
+    </div>
+  );
+};
+FixPresetsClick.storyName = '修复 presets 点击后不收起问题';
+
 /**
  * fix https://github.com/DouyinFE/semi-design/issues/410
  */