@douyinfe/semi-foundation 2.67.0 → 2.67.1

package/datePicker/foundation.ts

@@ -227,7 +227,6 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
  */
 export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapter> {
 
-    clickConfirmButton: boolean;
     constructor(adapter: DatePickerAdapter) {
         super({ ...adapter });
     }
@@ -389,17 +388,12 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      *    - date type and not multiple, close panel after select date
      *    - dateRange type, close panel after select rangeStart and rangeEnd
      *  4. click outside
-     * @param {Event} e
-     * @param {String} inputValue
-     * @param {Date[]} dates
      */
-    closePanel(e?: any, inputValue: string = null, dates?: Date[]) {
-        const { value } = this._adapter.getStates();
-        const willUpdateDates = isNullOrUndefined(dates) ? value : dates;
+    closePanel() {
         if (!this._isControlledComponent('open')) {
             this.close();
         } else {
-            this.resetInnerSelectedStates(willUpdateDates);
+            this.resetInnerSelectedStates();
         }
         this._adapter.notifyOpenChange(false);
     }
@@ -410,7 +404,8 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     }
 
     close() {
-        this._adapter.togglePanel(false, () => this.resetInnerSelectedStates());
+        this._adapter.togglePanel(false);
+        this.resetInnerSelectedStates();
         this._adapter.unregisterClickOutSide();
     }
 
@@ -434,15 +429,16 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     /**
      * reset cachedSelectedValue, inputValue when close panel
      */
-    resetInnerSelectedStates(willUpdateDates?: Date[]) {
-        const { value } = this._adapter.getStates();
-        const needResetCachedSelectedValue = isNullOrUndefined(willUpdateDates) || !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
-        if (needResetCachedSelectedValue) {
-            this.resetCachedSelectedValue(value);
-        }
+    resetInnerSelectedStates() {
+        // 通过 setTimeout 保证需要获取到最新的 state 状态
+        setTimeout(() => {
+            const { value, cachedSelectedValue } = this._adapter.getStates();
+            if (!isEqual(value, cachedSelectedValue)) {
+                this.resetCachedSelectedValue(value);
+            }
+        }, 0);
         this.resetFocus();
         this.clearInputValue();
-        this.clickConfirmButton = false;
     }
 
     resetFocus(e?: any) {
@@ -1016,7 +1012,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
 
         const focusRecordChecked = !needCheckFocusRecord || (needCheckFocusRecord && this._adapter.couldPanelClosed());
         if ((type === 'date' && !this._isMultiple() && closePanel) || (type === 'dateRange' && this._isRangeValueComplete(dates) && closePanel && focusRecordChecked)) {
-            this.closePanel(undefined, inputValue, dates);
+            this.closePanel();
         }
     }
 
@@ -1043,7 +1039,6 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     }
 
     handleConfirm() {
-        this.clickConfirmButton = true;
         const { cachedSelectedValue, value } = this._adapter.getStates();
         const isRangeValueComplete = this._isRangeValueComplete(cachedSelectedValue);
         const newValue = isRangeValueComplete ? cachedSelectedValue : value;
@@ -1051,7 +1046,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
             this._adapter.updateValue(newValue);
         }
         // If the input is incomplete, the legal date of the last input is used
-        this.closePanel(undefined, undefined, newValue);
+        this.closePanel();
 
         if (isRangeValueComplete) {
             const { notifyValue, notifyDate } = this.disposeCallbackArgs(cachedSelectedValue);

package/lib/cjs/datePicker/foundation.d.ts

@@ -190,7 +190,6 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
  *  task 2. When the input box changes, update the date value = > Notify the change
  */
 export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapter> {
-    clickConfirmButton: boolean;
     constructor(adapter: DatePickerAdapter);
     init(): void;
     initFromProps({ value, timeZone, prevTimeZone }: Pick<DatePickerFoundationProps, 'value' | 'timeZone'> & {
@@ -247,11 +246,8 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      *    - date type and not multiple, close panel after select date
      *    - dateRange type, close panel after select rangeStart and rangeEnd
      *  4. click outside
-     * @param {Event} e
-     * @param {String} inputValue
-     * @param {Date[]} dates
      */
-    closePanel(e?: any, inputValue?: string, dates?: Date[]): void;
+    closePanel(): void;
     open(): void;
     close(): void;
     focus(focusType?: Exclude<RangeType, false>): void;
@@ -259,7 +255,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     /**
      * reset cachedSelectedValue, inputValue when close panel
      */
-    resetInnerSelectedStates(willUpdateDates?: Date[]): void;
+    resetInnerSelectedStates(): void;
     resetFocus(e?: any): void;
     /**
      * cachedSelectedValue can be `(Date|null)[]` or `null`

package/lib/cjs/datePicker/foundation.js

@@ -217,21 +217,12 @@ class DatePickerFoundation extends _foundation.default {
    *    - date type and not multiple, close panel after select date
    *    - dateRange type, close panel after select rangeStart and rangeEnd
    *  4. click outside
-   * @param {Event} e
-   * @param {String} inputValue
-   * @param {Date[]} dates
    */
-  closePanel(e) {
-    let inputValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    let dates = arguments.length > 2 ? arguments[2] : undefined;
-    const {
-      value
-    } = this._adapter.getStates();
-    const willUpdateDates = (0, _isNullOrUndefined.default)(dates) ? value : dates;
+  closePanel() {
     if (!this._isControlledComponent('open')) {
       this.close();
     } else {
-      this.resetInnerSelectedStates(willUpdateDates);
+      this.resetInnerSelectedStates();
     }
     this._adapter.notifyOpenChange(false);
   }
@@ -240,7 +231,8 @@ class DatePickerFoundation extends _foundation.default {
     this._adapter.registerClickOutSide();
   }
   close() {
-    this._adapter.togglePanel(false, () => this.resetInnerSelectedStates());
+    this._adapter.togglePanel(false);
+    this.resetInnerSelectedStates();
     this._adapter.unregisterClickOutSide();
   }
   focus(focusType) {
@@ -261,17 +253,19 @@ class DatePickerFoundation extends _foundation.default {
   /**
    * reset cachedSelectedValue, inputValue when close panel
    */
-  resetInnerSelectedStates(willUpdateDates) {
-    const {
-      value
-    } = this._adapter.getStates();
-    const needResetCachedSelectedValue = (0, _isNullOrUndefined.default)(willUpdateDates) || !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
-    if (needResetCachedSelectedValue) {
-      this.resetCachedSelectedValue(value);
-    }
+  resetInnerSelectedStates() {
+    // 通过 setTimeout 保证需要获取到最新的 state 状态
+    setTimeout(() => {
+      const {
+        value,
+        cachedSelectedValue
+      } = this._adapter.getStates();
+      if (!(0, _isEqual2.default)(value, cachedSelectedValue)) {
+        this.resetCachedSelectedValue(value);
+      }
+    }, 0);
     this.resetFocus();
     this.clearInputValue();
-    this.clickConfirmButton = false;
   }
   resetFocus(e) {
     this._adapter.setRangeInputFocus(false);
@@ -825,7 +819,7 @@ class DatePickerFoundation extends _foundation.default {
     }
     const focusRecordChecked = !needCheckFocusRecord || needCheckFocusRecord && this._adapter.couldPanelClosed();
     if (type === 'date' && !this._isMultiple() && closePanel || type === 'dateRange' && this._isRangeValueComplete(dates) && closePanel && focusRecordChecked) {
-      this.closePanel(undefined, inputValue, dates);
+      this.closePanel();
     }
   }
   /**
@@ -852,7 +846,6 @@ class DatePickerFoundation extends _foundation.default {
     }
   }
   handleConfirm() {
-    this.clickConfirmButton = true;
     const {
       cachedSelectedValue,
       value
@@ -863,7 +856,7 @@ class DatePickerFoundation extends _foundation.default {
       this._adapter.updateValue(newValue);
     }
     // If the input is incomplete, the legal date of the last input is used
-    this.closePanel(undefined, undefined, newValue);
+    this.closePanel();
     if (isRangeValueComplete) {
       const {
         notifyValue,

package/lib/cjs/select/foundation.js

@@ -378,9 +378,16 @@ class SelectFoundation extends _foundation.default {
       closeCb,
       notToggleInput
     } = closeConfig || {};
+    const {
+      isFocus
+    } = this.getStates();
     this._adapter.closeMenu();
     this._adapter.notifyDropdownVisibleChange(false);
     this._adapter.setIsFocusInContainer(false);
+    if (isFocus) {
+      // if the isFocus state is true, refocus the trigger case see in https://github.com/DouyinFE/semi-design/issues/2465
+      this._focusTrigger();
+    }
     // this.unBindKeyBoardEvent();
     // this._notifyBlur(e);
     // this._adapter.updateFocusState(false);
@@ -411,7 +418,6 @@ class SelectFoundation extends _foundation.default {
     const isMultiple = this._isMultiple();
     if (!isMultiple) {
       this._handleSingleSelect(option, event);
-      this._focusTrigger();
     } else {
       this._handleMultipleSelect(option, event);
     }

package/lib/es/datePicker/foundation.d.ts

@@ -190,7 +190,6 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
  *  task 2. When the input box changes, update the date value = > Notify the change
  */
 export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapter> {
-    clickConfirmButton: boolean;
     constructor(adapter: DatePickerAdapter);
     init(): void;
     initFromProps({ value, timeZone, prevTimeZone }: Pick<DatePickerFoundationProps, 'value' | 'timeZone'> & {
@@ -247,11 +246,8 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      *    - date type and not multiple, close panel after select date
      *    - dateRange type, close panel after select rangeStart and rangeEnd
      *  4. click outside
-     * @param {Event} e
-     * @param {String} inputValue
-     * @param {Date[]} dates
      */
-    closePanel(e?: any, inputValue?: string, dates?: Date[]): void;
+    closePanel(): void;
     open(): void;
     close(): void;
     focus(focusType?: Exclude<RangeType, false>): void;
@@ -259,7 +255,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     /**
      * reset cachedSelectedValue, inputValue when close panel
      */
-    resetInnerSelectedStates(willUpdateDates?: Date[]): void;
+    resetInnerSelectedStates(): void;
     resetFocus(e?: any): void;
     /**
      * cachedSelectedValue can be `(Date|null)[]` or `null`

package/lib/es/datePicker/foundation.js

@@ -210,21 +210,12 @@ export default class DatePickerFoundation extends BaseFoundation {
    *    - date type and not multiple, close panel after select date
    *    - dateRange type, close panel after select rangeStart and rangeEnd
    *  4. click outside
-   * @param {Event} e
-   * @param {String} inputValue
-   * @param {Date[]} dates
    */
-  closePanel(e) {
-    let inputValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    let dates = arguments.length > 2 ? arguments[2] : undefined;
-    const {
-      value
-    } = this._adapter.getStates();
-    const willUpdateDates = isNullOrUndefined(dates) ? value : dates;
+  closePanel() {
     if (!this._isControlledComponent('open')) {
       this.close();
     } else {
-      this.resetInnerSelectedStates(willUpdateDates);
+      this.resetInnerSelectedStates();
     }
     this._adapter.notifyOpenChange(false);
   }
@@ -233,7 +224,8 @@ export default class DatePickerFoundation extends BaseFoundation {
     this._adapter.registerClickOutSide();
   }
   close() {
-    this._adapter.togglePanel(false, () => this.resetInnerSelectedStates());
+    this._adapter.togglePanel(false);
+    this.resetInnerSelectedStates();
     this._adapter.unregisterClickOutSide();
   }
   focus(focusType) {
@@ -254,17 +246,19 @@ export default class DatePickerFoundation extends BaseFoundation {
   /**
    * reset cachedSelectedValue, inputValue when close panel
    */
-  resetInnerSelectedStates(willUpdateDates) {
-    const {
-      value
-    } = this._adapter.getStates();
-    const needResetCachedSelectedValue = isNullOrUndefined(willUpdateDates) || !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
-    if (needResetCachedSelectedValue) {
-      this.resetCachedSelectedValue(value);
-    }
+  resetInnerSelectedStates() {
+    // 通过 setTimeout 保证需要获取到最新的 state 状态
+    setTimeout(() => {
+      const {
+        value,
+        cachedSelectedValue
+      } = this._adapter.getStates();
+      if (!_isEqual(value, cachedSelectedValue)) {
+        this.resetCachedSelectedValue(value);
+      }
+    }, 0);
     this.resetFocus();
     this.clearInputValue();
-    this.clickConfirmButton = false;
   }
   resetFocus(e) {
     this._adapter.setRangeInputFocus(false);
@@ -818,7 +812,7 @@ export default class DatePickerFoundation extends BaseFoundation {
     }
     const focusRecordChecked = !needCheckFocusRecord || needCheckFocusRecord && this._adapter.couldPanelClosed();
     if (type === 'date' && !this._isMultiple() && closePanel || type === 'dateRange' && this._isRangeValueComplete(dates) && closePanel && focusRecordChecked) {
-      this.closePanel(undefined, inputValue, dates);
+      this.closePanel();
     }
   }
   /**
@@ -845,7 +839,6 @@ export default class DatePickerFoundation extends BaseFoundation {
     }
   }
   handleConfirm() {
-    this.clickConfirmButton = true;
     const {
       cachedSelectedValue,
       value
@@ -856,7 +849,7 @@ export default class DatePickerFoundation extends BaseFoundation {
       this._adapter.updateValue(newValue);
     }
     // If the input is incomplete, the legal date of the last input is used
-    this.closePanel(undefined, undefined, newValue);
+    this.closePanel();
     if (isRangeValueComplete) {
       const {
         notifyValue,

package/lib/es/select/foundation.js

@@ -369,9 +369,16 @@ export default class SelectFoundation extends BaseFoundation {
       closeCb,
       notToggleInput
     } = closeConfig || {};
+    const {
+      isFocus
+    } = this.getStates();
     this._adapter.closeMenu();
     this._adapter.notifyDropdownVisibleChange(false);
     this._adapter.setIsFocusInContainer(false);
+    if (isFocus) {
+      // if the isFocus state is true, refocus the trigger case see in https://github.com/DouyinFE/semi-design/issues/2465
+      this._focusTrigger();
+    }
     // this.unBindKeyBoardEvent();
     // this._notifyBlur(e);
     // this._adapter.updateFocusState(false);
@@ -402,7 +409,6 @@ export default class SelectFoundation extends BaseFoundation {
     const isMultiple = this._isMultiple();
     if (!isMultiple) {
       this._handleSingleSelect(option, event);
-      this._focusTrigger();
     } else {
       this._handleMultipleSelect(option, event);
     }

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.67.0",
+    "version": "2.67.1",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.67.0",
+        "@douyinfe/semi-animation": "2.67.1",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -28,7 +28,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "e3d492cb6bf73316034b31c10565dd6cbb71b21a",
+    "gitHead": "3582ea01a35b6f6c9db326d74c3181697f66d1b1",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/select/foundation.ts

@@ -400,9 +400,14 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     close(closeConfig?: { event?: any; closeCb?: () => void; notToggleInput?: boolean }) {
         // to support A11y, closing the panel trigger does not necessarily lose focus
         const { event, closeCb, notToggleInput } = closeConfig || {};
+        const { isFocus } = this.getStates();
         this._adapter.closeMenu();
         this._adapter.notifyDropdownVisibleChange(false);
         this._adapter.setIsFocusInContainer(false);
+        if (isFocus) {
+            // if the isFocus state is true, refocus the trigger case see in https://github.com/DouyinFE/semi-design/issues/2465
+            this._focusTrigger();
+        }
         // this.unBindKeyBoardEvent();
         // this._notifyBlur(e);
         // this._adapter.updateFocusState(false);
@@ -438,7 +443,6 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         const isMultiple = this._isMultiple();
         if (!isMultiple) {
             this._handleSingleSelect(option, event);
-            this._focusTrigger();
         } else {
             this._handleMultipleSelect(option, event);
         }