antd-mobile 5.41.1 → 5.42.0-alpha.0

package/2x/es/components/virtual-input/virtual-input.js

@@ -6,6 +6,7 @@ import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProp, mergeProps } from '../../utils/with-default-props';
 import { useConfig } from '../config-provider';
+import useClickOutside from './use-click-outside';
 const classPrefix = 'adm-virtual-input';
 const defaultProps = {
   defaultValue: '',
@@ -33,13 +34,10 @@ export const VirtualInput = forwardRef((props, ref) => {
   const touchMoveTimeoutRef = useRef();
   const clearIcon = mergeProp(React.createElement(CloseCircleFill, null), componentConfig.clearIcon, props.clearIcon);
   function scrollToEnd() {
-    const root = rootRef.current;
-    if (!root) return;
-    if (document.activeElement !== root) {
+    const content = contentRef.current;
+    if (!content) {
       return;
     }
-    const content = contentRef.current;
-    if (!content) return;
     content.scrollLeft = content.clientWidth;
   }
   useEffect(() => {
@@ -71,23 +69,29 @@ export const VirtualInput = forwardRef((props, ref) => {
   useImperativeHandle(ref, () => ({
     focus: () => {
       var _a;
-      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     },
     blur: () => {
       var _a;
-      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      setBlur();
     }
   }));
-  function onFocus() {
+  function setFocus() {
     var _a;
+    if (hasFocus) return;
     setHasFocus(true);
     (_a = mergedProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(mergedProps);
   }
-  function onBlur() {
+  function setBlur() {
     var _a;
+    if (!hasFocus) return;
     setHasFocus(false);
     (_a = mergedProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(mergedProps);
   }
+  useClickOutside(() => {
+    setBlur();
+  }, rootRef);
   const keyboard = mergedProps.keyboard;
   const keyboardElement = keyboard && React.cloneElement(keyboard, {
     onInput: v => {
@@ -115,26 +119,20 @@ export const VirtualInput = forwardRef((props, ref) => {
     },
     visible: hasFocus,
     onClose: () => {
-      var _a, _b, _c, _d;
-      const activeElement = document.activeElement;
-      // Long press makes `activeElement` to be the child of rootRef
-      // We will trigger blur on the child element instead
-      if (activeElement && ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement))) {
-        activeElement.blur();
-      } else {
-        (_b = rootRef.current) === null || _b === void 0 ? void 0 : _b.blur();
-      }
-      (_d = (_c = keyboard.props).onClose) === null || _d === void 0 ? void 0 : _d.call(_c);
+      var _a, _b;
+      setBlur();
+      (_b = (_a = keyboard.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
     },
     getContainer: null
   });
   // 点击输入框时，将光标置于最后
-  const setCaretPositionToEnd = () => {
-    var _a, _b;
+  const setCaretPositionToEnd = e => {
+    var _a, _b, _c;
     if (caretPosition !== value.length) {
       setCaretPosition(value.length);
       (_b = (_a = mergedProps.cursor) === null || _a === void 0 ? void 0 : _a.onMove) === null || _b === void 0 ? void 0 : _b.call(_a, value.length);
     }
+    (_c = mergedProps.onClick) === null || _c === void 0 ? void 0 : _c.call(mergedProps, e);
   };
   // 点击单个字符时，根据点击位置置于字符前或后
   const changeCaretPosition = index => e => {
@@ -203,23 +201,27 @@ export const VirtualInput = forwardRef((props, ref) => {
     ref: rootRef,
     className: classNames(classPrefix, {
       [`${classPrefix}-disabled`]: mergedProps.disabled,
-      [`${classPrefix}-caret-dragging`]: isCaretDragging
-    }),
-    tabIndex: mergedProps.disabled ? undefined : 0,
-    role: 'textbox',
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onClick: mergedProps.onClick
+      [`${classPrefix}-caret-dragging`]: isCaretDragging,
+      [`${classPrefix}-focused`]: hasFocus
+    })
   }, React.createElement("div", {
     className: `${classPrefix}-content`,
     ref: contentRef,
     "aria-disabled": mergedProps.disabled,
-    "aria-label": mergedProps.placeholder,
+    "aria-label": value || mergedProps.placeholder,
+    role: 'textbox',
+    tabIndex: mergedProps.disabled ? undefined : 0,
+    // note: 这里增加 onFocus 有两个目的：
+    // 1. 在安卓 talkback 模式下，role=textbox 的元素双击后只会触发 focus 而非 click
+    // 2. 处理 content 框点击、单个字符点击时，不用再额外处理 focus 逻辑，因为 focus 事件会先触发
+    onFocus: setFocus,
     onClick: setCaretPositionToEnd,
     onTouchStart: handleTouchStart,
     onTouchMove: handleTouchMove,
     onTouchEnd: handleTouchEnd
-  }, chars.slice(0, caretPosition).map((i, index) => React.createElement("span", {
+  }, React.createElement("span", {
+    className: `${classPrefix}-trap`
+  }), chars.slice(0, caretPosition).map((i, index) => React.createElement("span", {
     ref: index === 0 ? charRef : undefined,
     key: index,
     onClick: changeCaretPosition(index)

package/2x/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.41.1",
+  "version": "5.42.0-alpha.0",
   "homepage": "https://github.com/ant-design/ant-design-mobile#readme",
   "bugs": {
     "url": "https://github.com/ant-design/ant-design-mobile/issues"

package/bundle/antd-mobile.cjs.development.js

@@ -23207,7 +23207,6 @@ const NumberKeyboard = (p) => {
   };
   const onKeyPress = (e2, key) => {
     var _a, _b;
-    e2.preventDefault();
     switch (key) {
       case "BACKSPACE":
         onDelete === null || onDelete === void 0 ? void 0 : onDelete();
@@ -23245,6 +23244,15 @@ const NumberKeyboard = (p) => {
       tabIndex: -1
     }, React$3.createElement(DownOutline, null)));
   };
+  const onBackspaceTouchStart = () => {
+    stopContinueClear();
+    startContinueClear();
+  };
+  const onBackspaceTouchEnd = (e2) => {
+    e2.preventDefault();
+    stopContinueClear();
+    onKeyPress(e2, "BACKSPACE");
+  };
   const renderKey = (key, index2) => {
     const isNumberKey = /^\d$/.test(key);
     const isBackspace = key === "BACKSPACE";
@@ -23262,17 +23270,13 @@ const NumberKeyboard = (p) => {
       key,
       className,
       // 仅为  backspace 绑定，支持长按快速删除
-      onTouchStart: isBackspace ? () => {
-        stopContinueClear();
-        startContinueClear();
-      } : void 0,
-      onTouchEnd: isBackspace ? (e2) => {
-        stopContinueClear();
-        onKeyPress(e2, key);
-      } : void 0,
+      onTouchStart: isBackspace ? onBackspaceTouchStart : void 0,
+      onTouchEnd: isBackspace ? onBackspaceTouchEnd : void 0,
+      onTouchCancel: isBackspace ? stopContinueClear : void 0,
       // <div role="button" title="1" onTouchEnd={e => {}}>1</div> 安卓上 talback 可读不可点
       // see https://ua-gilded-eef7f9.netlify.app/grid-button-bug.html
-      // 所以还是绑定 click，通过 touchEnd 的 preventDefault 防重复触发
+      // 所以普通按钮绑定 click 事件，而 backspace 仍然额外绑定 touch 事件支持长按删除
+      // backspace touchend 时会 preventDefault 阻止其后续 click 事件
       onClick: (e2) => {
         stopContinueClear();
         onKeyPress(e2, key);
@@ -23291,10 +23295,7 @@ const NumberKeyboard = (p) => {
     forceRender: props.forceRender
   }, withNativeProps(props, React$3.createElement("div", {
     ref: keyboardRef,
-    className: classPrefix$x,
-    onMouseDown: (e2) => {
-      e2.preventDefault();
-    }
+    className: classPrefix$x
   }, renderHeader(), React$3.createElement("div", {
     className: `${classPrefix$x}-wrapper`
   }, React$3.createElement("div", {
@@ -23305,13 +23306,9 @@ const NumberKeyboard = (p) => {
     className: `${classPrefix$x}-confirm`
   }, React$3.createElement("div", {
     className: `${classPrefix$x}-key ${classPrefix$x}-key-extra ${classPrefix$x}-key-bs`,
-    onTouchStart: () => {
-      startContinueClear();
-    },
-    onTouchEnd: (e2) => {
-      stopContinueClear();
-      onKeyPress(e2, "BACKSPACE");
-    },
+    onTouchStart: onBackspaceTouchStart,
+    onTouchEnd: onBackspaceTouchEnd,
+    onTouchCancel: stopContinueClear,
     onClick: (e2) => {
       stopContinueClear();
       onKeyPress(e2, "BACKSPACE");
@@ -27595,6 +27592,20 @@ const Multiple = (p) => {
 const index = attachPropertiesToComponent(TreeSelect, {
   Multiple
 });
+function useClickOutside(handler, ref2) {
+  React$3.useEffect(() => {
+    function handleClick(event) {
+      if (!ref2.current || ref2.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    }
+    document.addEventListener("click", handleClick, true);
+    return () => {
+      document.removeEventListener("click", handleClick, true);
+    };
+  }, [handler, ref2]);
+}
 const classPrefix$2 = "adm-virtual-input";
 const defaultProps$2 = {
   defaultValue: "",
@@ -27622,15 +27633,10 @@ const VirtualInput = React$3.forwardRef((props, ref2) => {
   const touchMoveTimeoutRef = React$3.useRef();
   const clearIcon = mergeProp(React$3.createElement(CloseCircleFill, null), componentConfig.clearIcon, props.clearIcon);
   function scrollToEnd() {
-    const root2 = rootRef.current;
-    if (!root2)
-      return;
-    if (document.activeElement !== root2) {
-      return;
-    }
     const content = contentRef.current;
-    if (!content)
+    if (!content) {
       return;
+    }
     content.scrollLeft = content.clientWidth;
   }
   React$3.useEffect(() => {
@@ -27660,23 +27666,31 @@ const VirtualInput = React$3.forwardRef((props, ref2) => {
   React$3.useImperativeHandle(ref2, () => ({
     focus: () => {
       var _a;
-      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     },
     blur: () => {
       var _a;
-      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      setBlur();
     }
   }));
-  function onFocus() {
+  function setFocus() {
     var _a;
+    if (hasFocus)
+      return;
     setHasFocus(true);
     (_a = mergedProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(mergedProps);
   }
-  function onBlur() {
+  function setBlur() {
     var _a;
+    if (!hasFocus)
+      return;
     setHasFocus(false);
     (_a = mergedProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(mergedProps);
   }
+  useClickOutside(() => {
+    setBlur();
+  }, rootRef);
   const keyboard = mergedProps.keyboard;
   const keyboardElement = keyboard && React$3.cloneElement(keyboard, {
     onInput: (v) => {
@@ -27703,23 +27717,19 @@ const VirtualInput = React$3.forwardRef((props, ref2) => {
     },
     visible: hasFocus,
     onClose: () => {
-      var _a, _b, _c, _d;
-      const activeElement = document.activeElement;
-      if (activeElement && ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement))) {
-        activeElement.blur();
-      } else {
-        (_b = rootRef.current) === null || _b === void 0 ? void 0 : _b.blur();
-      }
-      (_d = (_c = keyboard.props).onClose) === null || _d === void 0 ? void 0 : _d.call(_c);
+      var _a, _b;
+      setBlur();
+      (_b = (_a = keyboard.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
     },
     getContainer: null
   });
-  const setCaretPositionToEnd = () => {
-    var _a, _b;
+  const setCaretPositionToEnd = (e2) => {
+    var _a, _b, _c;
     if (caretPosition !== value.length) {
       setCaretPosition(value.length);
       (_b = (_a = mergedProps.cursor) === null || _a === void 0 ? void 0 : _a.onMove) === null || _b === void 0 ? void 0 : _b.call(_a, value.length);
     }
+    (_c = mergedProps.onClick) === null || _c === void 0 ? void 0 : _c.call(mergedProps, e2);
   };
   const changeCaretPosition = (index2) => (e2) => {
     var _a, _b, _c;
@@ -27786,23 +27796,27 @@ const VirtualInput = React$3.forwardRef((props, ref2) => {
     ref: rootRef,
     className: classNames(classPrefix$2, {
       [`${classPrefix$2}-disabled`]: mergedProps.disabled,
-      [`${classPrefix$2}-caret-dragging`]: isCaretDragging
-    }),
-    tabIndex: mergedProps.disabled ? void 0 : 0,
-    role: "textbox",
-    onFocus,
-    onBlur,
-    onClick: mergedProps.onClick
+      [`${classPrefix$2}-caret-dragging`]: isCaretDragging,
+      [`${classPrefix$2}-focused`]: hasFocus
+    })
   }, React$3.createElement("div", {
     className: `${classPrefix$2}-content`,
     ref: contentRef,
     "aria-disabled": mergedProps.disabled,
-    "aria-label": mergedProps.placeholder,
+    "aria-label": value || mergedProps.placeholder,
+    role: "textbox",
+    tabIndex: mergedProps.disabled ? void 0 : 0,
+    // note: 这里增加 onFocus 有两个目的：
+    // 1. 在安卓 talkback 模式下，role=textbox 的元素双击后只会触发 focus 而非 click
+    // 2. 处理 content 框点击、单个字符点击时，不用再额外处理 focus 逻辑，因为 focus 事件会先触发
+    onFocus: setFocus,
     onClick: setCaretPositionToEnd,
     onTouchStart: handleTouchStart,
     onTouchMove: handleTouchMove,
     onTouchEnd: handleTouchEnd
-  }, chars.slice(0, caretPosition).map((i2, index2) => React$3.createElement("span", {
+  }, React$3.createElement("span", {
+    className: `${classPrefix$2}-trap`
+  }), chars.slice(0, caretPosition).map((i2, index2) => React$3.createElement("span", {
     ref: index2 === 0 ? charRef : void 0,
     key: index2,
     onClick: changeCaretPosition(index2)