@arco-design/mobile-react 2.29.0 → 2.29.1

package/esm/input/hooks.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useEffect, useRef } from 'react';
 import { cls, nextTick } from '@arco-design/mobile-utils';
 import IconClear from '../icon/IconClear';
@@ -47,23 +48,6 @@ export function useInputLogic(props, inputRef) {
       toggleClear = _useState2[1];
 
   var compositingRef = 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 = useState(false),
       isFocusing = _useState3[0],
@@ -163,28 +147,24 @@ export function useInputLogic(props, inputRef) {
   }
 
   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) {
@@ -215,10 +195,17 @@ export 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();
+        nextTick(function () {
+          inputRef.current && inputRef.current.focus();
+        });
       }
     });
   }
@@ -228,6 +215,12 @@ export 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.createElement("div", {
       role: "search",
       className: prefixCls + "-container all-border-box " + (className || ''),
@@ -247,10 +240,9 @@ export function useInputLogic(props, inputRef) {
       className: cls(prefixCls + "-label", {
         required: required
       })
-    }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/React.createElement("div", {
-      className: prefixCls + "-clear",
-      onClick: handleClear
-    }, clearIcon) : null, suffix ? /*#__PURE__*/React.createElement("div", {
+    }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/React.createElement("div", _extends({
+      className: prefixCls + "-clear"
+    }, clearEvent), clearIcon) : null, suffix ? /*#__PURE__*/React.createElement("div", {
       className: prefixCls + "-suffix"
     }, suffix) : null), renderPendNode(append));
   }

package/esm/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.29.0",
+    "version": "2.29.1",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.16.3",
+        "@arco-design/mobile-utils": "2.16.4",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -49,5 +49,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "8fbc59117b0d240f4faeee45daca1489803ab78a"
+    "gitHead": "4feb5984a8951d9d65662c069b2e2c3a61c81014"
 }

package/umd/input/hooks.js

@@ -1,22 +1,23 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "@arco-design/mobile-utils", "../icon/IconClear", "../_helpers"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../icon/IconClear", "../_helpers"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("@arco-design/mobile-utils"), require("../icon/IconClear"), require("../_helpers"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../icon/IconClear"), require("../_helpers"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.mobileUtils, global.IconClear, global._helpers);
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.IconClear, global._helpers);
     global.hooks = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils, _IconClear, _helpers) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _IconClear, _helpers) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
   _exports.__esModule = true;
   _exports.useInputLogic = useInputLogic;
+  _extends2 = _interopRequireDefault(_extends2);
   _react = _interopRequireWildcard(_react);
   _IconClear = _interopRequireDefault(_IconClear);
 
@@ -69,23 +70,6 @@
         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],
@@ -185,28 +169,24 @@
     }
 
     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) {
@@ -237,10 +217,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();
+          (0, _mobileUtils.nextTick)(function () {
+            inputRef.current && inputRef.current.focus();
+          });
         }
       });
     }
@@ -250,6 +237,12 @@
     }
 
     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 || ''),
@@ -269,10 +262,9 @@
         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/umd/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