@arco-design/mobile-react 2.29.0 → 2.29.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.29.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.29.0...@arco-design/mobile-react@2.29.1) (2023-08-21)
+
+
+### Bug Fixes
+
+* fix wrong logic after click clear icon of `Input`, `Textarea` and `SearchBar` ([#156](https://github.com/arco-design/arco-design-mobile/issues/156)) ([b741263](https://github.com/arco-design/arco-design-mobile/commit/b741263fd1a1b9c3da9c106f7487714e33e042f2))
+
+
+
+
+
 # [2.29.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.28.2...@arco-design/mobile-react@2.29.0) (2023-08-17)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.28.2/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.28.2/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.29.0/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.28.2/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.28.2/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.29.0/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/input/hooks.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.useInputLogic = useInputLogic;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _mobileUtils = require("@arco-design/mobile-utils");
@@ -62,23 +64,6 @@ function useInputLogic(props, inputRef) {
       toggleClear = _useState2[1];
 
   var compositingRef = (0, _react.useRef)(false);
-  /**
-   * clear相关问题背景
-   * 如果点击clear按钮之前已经是focusing状态了，那么在点完clear按钮之后会手动聚焦一下
-   * 该行为将导致onClear事件触发时，也会触发一次onBlur和onFocus事件，可能影响一些组件外的代码逻辑
-   *
-   * e.g. 假设input按钮右侧有一个按钮仅在聚焦时展示
-   * 实现代码大致是：onBlur设置其visible为false，onFocus设置其visible为true
-   * 那么这个按钮就会因为clear的点击造成一瞬的闪烁
-   *
-   * 解决思路
-   * 先来看一下，在输入框已激活的状态时，点击清除按钮后，组件的一些事件的触发顺序
-   * handleBlur -> handleClear -> handleFocus -> onBlur(外部回调) -> onFocus(外部回调)
-   * 可以看到外部的onBlur和onFocus回调都是在handleClear函数之后被调用
-   * 因此可以在handleClear中设置一个shouldPreventEvent的boolean标志
-   * 如果这个标志为true，则跳过调用外部的onBlur和onFocus，并在最后再将标志置回false
-   *
-   */
 
   var _useState3 = (0, _react.useState)(false),
       isFocusing = _useState3[0],
@@ -178,28 +163,24 @@ function useInputLogic(props, inputRef) {
   }
 
   function handleFocus(e) {
-    (0, _mobileUtils.nextTick)(function () {
-      if (preventEventWhenClearing && shouldPreventEvent.current) {
-        shouldPreventEvent.current = false;
-        return;
-      }
+    if (preventEventWhenClearing && shouldPreventEvent.current) {
+      shouldPreventEvent.current = false;
+      return;
+    }
 
-      setIsFocusing(true);
-      clearShowType === 'focus' && toggleClear(true);
-      onFocus && onFocus(e);
-    });
+    setIsFocusing(true);
+    clearShowType === 'focus' && toggleClear(true);
+    onFocus && onFocus(e);
   }
 
   function handleBlur(e) {
-    (0, _mobileUtils.nextTick)(function () {
-      if (preventEventWhenClearing && shouldPreventEvent.current) {
-        return;
-      }
+    if (preventEventWhenClearing && shouldPreventEvent.current) {
+      return;
+    }
 
-      setIsFocusing(false);
-      clearShowType === 'focus' && toggleClear(false);
-      onBlur && onBlur(e);
-    });
+    setIsFocusing(false);
+    clearShowType === 'focus' && toggleClear(false);
+    onBlur && onBlur(e);
   }
 
   function handleClick(e) {
@@ -230,10 +211,17 @@ function useInputLogic(props, inputRef) {
 
       if (isFocusing) {
         if (preventEventWhenClearing) {
-          shouldPreventEvent.current = true;
+          shouldPreventEvent.current = true; // 一段时间未执行blur或focus则重置，避免对下次事件循环造成影响
+          // @en If blur or focus is not executed for a period of time, it will be reset to avoid affecting the next event loop
+
+          setTimeout(function () {
+            shouldPreventEvent.current = false;
+          }, 200);
         }
 
-        inputRef.current && inputRef.current.focus();
+        (0, _mobileUtils.nextTick)(function () {
+          inputRef.current && inputRef.current.focus();
+        });
       }
     });
   }
@@ -243,6 +231,12 @@ function useInputLogic(props, inputRef) {
   }
 
   function renderWrapper(prefixCls, type, children) {
+    var _clearEvent;
+
+    // handleClear必须早于handleBlur执行，pc端仅mousedown事件触发早于blur，移动端touch相关事件均早于blur
+    // @en handleClear must be executed earlier than handleBlur
+    // @en only the mousedown event on the PC side is triggered earlier than blur, and the touch-related events on the mobile side are all earlier than blur
+    var clearEvent = (_clearEvent = {}, _clearEvent[system === 'pc' ? 'onMouseDown' : 'onTouchEnd'] = handleClear, _clearEvent);
     return /*#__PURE__*/_react.default.createElement("div", {
       role: "search",
       className: prefixCls + "-container all-border-box " + (className || ''),
@@ -262,10 +256,9 @@ function useInputLogic(props, inputRef) {
       className: (0, _mobileUtils.cls)(prefixCls + "-label", {
         required: required
       })
-    }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/_react.default.createElement("div", {
-      className: prefixCls + "-clear",
-      onClick: handleClear
-    }, clearIcon) : null, suffix ? /*#__PURE__*/_react.default.createElement("div", {
+    }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+      className: prefixCls + "-clear"
+    }, clearEvent), clearIcon) : null, suffix ? /*#__PURE__*/_react.default.createElement("div", {
       className: prefixCls + "-suffix"
     }, suffix) : null), renderPendNode(append));
   }

package/cjs/input/props.d.ts

@@ -124,7 +124,7 @@ export interface BasicInputProps<T = HTMLInputElement> {
      * 按下清除按钮回调
      * @en Callback when clear button is pressed
      */
-    onClear?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onClear?: (e: React.TouchEvent<HTMLElement>) => void;
     /**
      * 输入框前置内容，在输入框内部，也可自定义
      * @en The prefix of the input box, inside the input box, can also be customized

package/dist/index.js

@@ -941,7 +941,7 @@
       try {
         var u = navigator.userAgent;
         var android = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
-        var ios = u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) || u.indexOf('Mac OS X') > -1;
+        var ios = u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
         var pc = !android && !ios;
         var system = android ? 'android' : 'ios';
         return pc ? 'pc' : system;
@@ -17316,7 +17316,7 @@
     var index$h = componentWrapper(ImagePicker, 'ImagePicker');
 
     /*!
-    * @arco-design/transformable v1.0.2
+    * @arco-design/transformable v1.0.1
     * (c) 2022 ludan.kibbon
     */
     function _defineProperty(obj, key, value) {
@@ -21029,23 +21029,6 @@
           toggleClear = _f[1];
 
       var compositingRef = React.useRef(false);
-      /**
-       * clear相关问题背景
-       * 如果点击clear按钮之前已经是focusing状态了，那么在点完clear按钮之后会手动聚焦一下
-       * 该行为将导致onClear事件触发时，也会触发一次onBlur和onFocus事件，可能影响一些组件外的代码逻辑
-       *
-       * e.g. 假设input按钮右侧有一个按钮仅在聚焦时展示
-       * 实现代码大致是：onBlur设置其visible为false，onFocus设置其visible为true
-       * 那么这个按钮就会因为clear的点击造成一瞬的闪烁
-       *
-       * 解决思路
-       * 先来看一下，在输入框已激活的状态时，点击清除按钮后，组件的一些事件的触发顺序
-       * handleBlur -> handleClear -> handleFocus -> onBlur(外部回调) -> onFocus(外部回调)
-       * 可以看到外部的onBlur和onFocus回调都是在handleClear函数之后被调用
-       * 因此可以在handleClear中设置一个shouldPreventEvent的boolean标志
-       * 如果这个标志为true，则跳过调用外部的onBlur和onFocus，并在最后再将标志置回false
-       *
-       */
 
       var _g = React.useState(false),
           isFocusing = _g[0],
@@ -21145,28 +21128,24 @@
       }
 
       function handleFocus(e) {
-        nextTick(function () {
-          if (preventEventWhenClearing && shouldPreventEvent.current) {
-            shouldPreventEvent.current = false;
-            return;
-          }
+        if (preventEventWhenClearing && shouldPreventEvent.current) {
+          shouldPreventEvent.current = false;
+          return;
+        }
 
-          setIsFocusing(true);
-          clearShowType === 'focus' && toggleClear(true);
-          onFocus && onFocus(e);
-        });
+        setIsFocusing(true);
+        clearShowType === 'focus' && toggleClear(true);
+        onFocus && onFocus(e);
       }
 
       function handleBlur(e) {
-        nextTick(function () {
-          if (preventEventWhenClearing && shouldPreventEvent.current) {
-            return;
-          }
+        if (preventEventWhenClearing && shouldPreventEvent.current) {
+          return;
+        }
 
-          setIsFocusing(false);
-          clearShowType === 'focus' && toggleClear(false);
-          onBlur && onBlur(e);
-        });
+        setIsFocusing(false);
+        clearShowType === 'focus' && toggleClear(false);
+        onBlur && onBlur(e);
       }
 
       function handleClick(e) {
@@ -21197,10 +21176,17 @@
 
           if (isFocusing) {
             if (preventEventWhenClearing) {
-              shouldPreventEvent.current = true;
+              shouldPreventEvent.current = true; // 一段时间未执行blur或focus则重置，避免对下次事件循环造成影响
+              // @en If blur or focus is not executed for a period of time, it will be reset to avoid affecting the next event loop
+
+              setTimeout(function () {
+                shouldPreventEvent.current = false;
+              }, 200);
             }
 
-            inputRef.current && inputRef.current.focus();
+            nextTick(function () {
+              inputRef.current && inputRef.current.focus();
+            });
           }
         });
       }
@@ -21210,6 +21196,12 @@
       }
 
       function renderWrapper(prefixCls, type, children) {
+        var _a; // handleClear必须早于handleBlur执行，pc端仅mousedown事件触发早于blur，移动端touch相关事件均早于blur
+        // @en handleClear must be executed earlier than handleBlur
+        // @en only the mousedown event on the PC side is triggered earlier than blur, and the touch-related events on the mobile side are all earlier than blur
+
+
+        var clearEvent = (_a = {}, _a[system === 'pc' ? 'onMouseDown' : 'onTouchEnd'] = handleClear, _a);
         return /*#__PURE__*/React__default["default"].createElement("div", {
           role: "search",
           className: prefixCls + "-container all-border-box " + (className || ''),
@@ -21229,10 +21221,9 @@
           className: cls(prefixCls + "-label", {
             required: required
           })
-        }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/React__default["default"].createElement("div", {
-          className: prefixCls + "-clear",
-          onClick: handleClear
-        }, clearIcon) : null, suffix ? /*#__PURE__*/React__default["default"].createElement("div", {
+        }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/React__default["default"].createElement("div", __assign$2({
+          className: prefixCls + "-clear"
+        }, clearEvent), clearIcon) : null, suffix ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-suffix"
         }, suffix) : null), renderPendNode(append));
       }