@douyinfe/semi-ui 2.2.0 → 2.2.1

package/dist/umd/semi-ui.js

@@ -52505,12 +52505,10 @@ class foundation_DatePickerFoundation extends foundation {
    *   2. set cachedSelectedValue using given dates(in needConfirm mode)
    *      - directly closePanel without click confirm will set cachedSelectedValue to state value
    *      - select one date(which means that the selection value is incomplete) and click confirm also set cachedSelectedValue to state value
-   * @param {String} inputValue
-   * @param {Date[]} dates
    */
 
 
-  rangeTypeSideEffectsWhenClosePanel(inputValue, dates) {
+  rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates) {
     if (this._isRangeType()) {
       this._adapter.setRangeInputFocus(false);
       /**
@@ -52520,17 +52518,36 @@ class foundation_DatePickerFoundation extends foundation {
 
 
       this.handleInputBlur(inputValue);
+      this.resetCachedSelectedValue(willUpdateDates);
+    }
+  }
+  /**
+   * clear input value when selected date is not confirmed
+   */
 
-      const {
-        value,
-        cachedSelectedValue
-      } = this._adapter.getStates();
 
-      const newCachedSelectedValue = is_array_default()(dates) && dates.length ? dates : value;
+  needConfirmSideEffectsWhenClosePanel(willUpdateDates) {
+    if (this._adapter.needConfirm() && !this._isRangeType()) {
+      /**
+       * if `null` input element will show `cachedSelectedValue` formatted value（format in DateInput render）
+       * if `` input element will show `` directly
+       */
+      this._adapter.updateInputValue(null);
 
-      if (!isEqual_default()(newCachedSelectedValue, cachedSelectedValue)) {
-        this._adapter.updateCachedSelectedValue(newCachedSelectedValue);
-      }
+      this.resetCachedSelectedValue(willUpdateDates);
+    }
+  }
+
+  resetCachedSelectedValue(willUpdateDates) {
+    const {
+      value,
+      cachedSelectedValue
+    } = this._adapter.getStates();
+
+    const newCachedSelectedValue = is_array_default()(willUpdateDates) ? willUpdateDates : value;
+
+    if (!isEqual_default()(newCachedSelectedValue, cachedSelectedValue)) {
+      this._adapter.updateCachedSelectedValue(newCachedSelectedValue);
     }
   }
   /**
@@ -52549,7 +52566,14 @@ class foundation_DatePickerFoundation extends foundation {
 
   closePanel(e) {
     let inputValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    let dates = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    let dates = arguments.length > 2 ? arguments[2] : undefined;
+
+    const {
+      value,
+      cachedSelectedValue
+    } = this._adapter.getStates();
+
+    const willUpdateDates = isNullOrUndefined(dates) ? this._adapter.needConfirm() ? value : cachedSelectedValue : dates;
 
     if (!this._isControlledComponent('open')) {
       this._adapter.togglePanel(false);
@@ -52558,7 +52582,8 @@ class foundation_DatePickerFoundation extends foundation {
     } // range type picker, closing panel requires the following side effects
 
 
-    this.rangeTypeSideEffectsWhenClosePanel(inputValue, dates);
+    this.rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates);
+    this.needConfirmSideEffectsWhenClosePanel(willUpdateDates);
 
     this._adapter.notifyOpenChange(false);
 
@@ -52620,7 +52645,8 @@ class foundation_DatePickerFoundation extends foundation {
     if (parsedResult && parsedResult.length) {
       this._updateValueAndInput(parsedResult, input === '');
     } else if (input === '') {
-      this._updateValueAndInput('', true);
+      // if clear input, set input to `''`
+      this._updateValueAndInput('', true, '');
     } else {
       this._updateValueAndInput(stateValue);
     }
@@ -53527,6 +53553,9 @@ class inputFoundation_InputFoundation extends foundation {
   }
 
   handleRangeInputClear(e) {
+    // prevent trigger click outside
+    this.stopPropagation(e);
+
     this._adapter.notifyRangeInputClear(e);
   }
 
@@ -59224,6 +59253,10 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
         }
 
         this.clickOutSideHandler = e => {
+          if (this.adapter.needConfirm()) {
+            return;
+          }
+
           const triggerEl = this.triggerElRef && this.triggerElRef.current;
           const panelEl = this.panelRef && this.panelRef.current;
           const isInTrigger = triggerEl && triggerEl.contains(e.target);