antd-mobile 5.41.1 → 5.42.0-alpha.0

package/cjs/components/dialog/dialog.d.ts

@@ -1,7 +1,7 @@
 import type { FC, ReactNode } from 'react';
-import { Action } from './dialog-action-button';
 import { NativeProps } from '../../utils/native-props';
 import { CenterPopupProps } from '../center-popup';
+import { Action } from './dialog-action-button';
 export declare type DialogProps = Pick<CenterPopupProps, 'afterClose' | 'afterShow' | 'bodyClassName' | 'bodyStyle' | 'destroyOnClose' | 'disableBodyScroll' | 'forceRender' | 'getContainer' | 'maskClassName' | 'maskStyle' | 'stopPropagation' | 'visible'> & {
     image?: string;
     header?: ReactNode;
@@ -12,5 +12,5 @@ export declare type DialogProps = Pick<CenterPopupProps, 'afterClose' | 'afterSh
     onClose?: () => void;
     closeOnAction?: boolean;
     closeOnMaskClick?: boolean;
-} & NativeProps;
+} & NativeProps<'--background-color' | '--border-radius' | '--max-width' | '--min-width' | '--z-index'>;
 export declare const Dialog: FC<DialogProps>;

package/cjs/components/dialog/dialog.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Dialog = void 0;
 var _tslib = require("tslib");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 var _withDefaultProps = require("../../utils/with-default-props");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _dialogActionButton = require("./dialog-action-button");
-var _image = _interopRequireDefault(require("../image"));
 var _autoCenter = _interopRequireDefault(require("../auto-center"));
 var _centerPopup = _interopRequireDefault(require("../center-popup"));
+var _image = _interopRequireDefault(require("../image"));
+var _dialogActionButton = require("./dialog-action-button");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const defaultProps = {
   actions: [],

package/cjs/components/modal/modal.d.ts

@@ -1,7 +1,7 @@
 import type { FC, ReactNode } from 'react';
-import { Action } from './modal-action-button';
 import { NativeProps } from '../../utils/native-props';
 import { CenterPopupProps } from '../center-popup';
+import { Action } from './modal-action-button';
 export declare type ModalProps = Pick<CenterPopupProps, 'afterClose' | 'afterShow' | 'bodyClassName' | 'bodyStyle' | 'destroyOnClose' | 'disableBodyScroll' | 'forceRender' | 'getContainer' | 'maskClassName' | 'maskStyle' | 'stopPropagation' | 'visible'> & {
     image?: string;
     header?: ReactNode;
@@ -13,5 +13,5 @@ export declare type ModalProps = Pick<CenterPopupProps, 'afterClose' | 'afterSho
     closeOnAction?: boolean;
     closeOnMaskClick?: boolean;
     showCloseButton?: boolean;
-} & NativeProps;
+} & NativeProps<'--background-color' | '--border-radius' | '--max-width' | '--min-width' | '--z-index'>;
 export declare const Modal: FC<ModalProps>;

package/cjs/components/modal/modal.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Modal = void 0;
 var _tslib = require("tslib");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 var _withDefaultProps = require("../../utils/with-default-props");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _modalActionButton = require("./modal-action-button");
-var _image = _interopRequireDefault(require("../image"));
-var _space = _interopRequireDefault(require("../space"));
 var _autoCenter = _interopRequireDefault(require("../auto-center"));
 var _centerPopup = _interopRequireDefault(require("../center-popup"));
+var _image = _interopRequireDefault(require("../image"));
+var _space = _interopRequireDefault(require("../space"));
+var _modalActionButton = require("./modal-action-button");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const defaultProps = {
   actions: [],

package/cjs/components/number-keyboard/number-keyboard.js

@@ -78,7 +78,6 @@ const NumberKeyboard = p => {
   };
   const onKeyPress = (e, key) => {
     var _a, _b;
-    e.preventDefault();
     switch (key) {
       case 'BACKSPACE':
         onDelete === null || onDelete === void 0 ? void 0 : onDelete();
@@ -115,6 +114,15 @@ const NumberKeyboard = p => {
       tabIndex: -1
     }, _react.default.createElement(_antdMobileIcons.DownOutline, null)));
   };
+  const onBackspaceTouchStart = () => {
+    stopContinueClear();
+    startContinueClear();
+  };
+  const onBackspaceTouchEnd = e => {
+    e.preventDefault(); // 短按时，touchend 会阻止后续 click 事件触发，防止删除两次
+    stopContinueClear();
+    onKeyPress(e, 'BACKSPACE');
+  };
   const renderKey = (key, index) => {
     const isNumberKey = /^\d$/.test(key);
     const isBackspace = key === 'BACKSPACE';
@@ -132,17 +140,13 @@ const NumberKeyboard = p => {
       key: key,
       className: className,
       // 仅为  backspace 绑定，支持长按快速删除
-      onTouchStart: isBackspace ? () => {
-        stopContinueClear();
-        startContinueClear();
-      } : undefined,
-      onTouchEnd: isBackspace ? e => {
-        stopContinueClear();
-        onKeyPress(e, key);
-      } : undefined,
+      onTouchStart: isBackspace ? onBackspaceTouchStart : undefined,
+      onTouchEnd: isBackspace ? onBackspaceTouchEnd : undefined,
+      onTouchCancel: isBackspace ? stopContinueClear : undefined,
       // <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: e => {
         stopContinueClear();
         onKeyPress(e, key);
@@ -161,10 +165,7 @@ const NumberKeyboard = p => {
     forceRender: props.forceRender
   }, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     ref: keyboardRef,
-    className: classPrefix,
-    onMouseDown: e => {
-      e.preventDefault();
-    }
+    className: classPrefix
   }, renderHeader(), _react.default.createElement("div", {
     className: `${classPrefix}-wrapper`
   }, _react.default.createElement("div", {
@@ -175,13 +176,9 @@ const NumberKeyboard = p => {
     className: `${classPrefix}-confirm`
   }, _react.default.createElement("div", {
     className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-bs`,
-    onTouchStart: () => {
-      startContinueClear();
-    },
-    onTouchEnd: e => {
-      stopContinueClear();
-      onKeyPress(e, 'BACKSPACE');
-    },
+    onTouchStart: onBackspaceTouchStart,
+    onTouchEnd: onBackspaceTouchEnd,
+    onTouchCancel: stopContinueClear,
     onClick: e => {
       stopContinueClear();
       onKeyPress(e, 'BACKSPACE');

package/cjs/components/virtual-input/use-click-outside.d.ts

@@ -0,0 +1,2 @@
+declare function useClickOutside(handler: (event: MouseEvent) => void, ref: React.RefObject<HTMLElement>): void;
+export default useClickOutside;

package/cjs/components/virtual-input/use-click-outside.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+// 监听点击组件外部的事件
+function useClickOutside(handler, ref) {
+  (0, _react.useEffect)(() => {
+    function handleClick(event) {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    }
+    // 在捕获阶段监听，以确保在事件被阻止传播之前触发
+    document.addEventListener('click', handleClick, true);
+    return () => {
+      document.removeEventListener('click', handleClick, true);
+    };
+  }, [handler, ref]);
+}
+var _default = useClickOutside;
+exports.default = _default;

package/cjs/components/virtual-input/virtual-input.css

@@ -36,6 +36,12 @@
 .adm-virtual-input-content::-webkit-scrollbar {
   display: none;
 }
+.adm-virtual-input-trap {
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  opacity: 0;
+}
 .adm-virtual-input-placeholder {
   display: block;
   position: absolute;
@@ -66,10 +72,10 @@
   left: 0;
   z-index: 1;
 }
-.adm-virtual-input:focus {
+.adm-virtual-input-focused {
   outline: none;
 }
-.adm-virtual-input:focus .adm-virtual-input-caret {
+.adm-virtual-input-focused .adm-virtual-input-caret {
   animation-name: adm-caret-blink;
   animation-duration: 1s;
   animation-timing-function: linear;

package/cjs/components/virtual-input/virtual-input.js

@@ -12,6 +12,7 @@ var _nativeProps = require("../../utils/native-props");
 var _usePropsValue = require("../../utils/use-props-value");
 var _withDefaultProps = require("../../utils/with-default-props");
 var _configProvider = require("../config-provider");
+var _useClickOutside = _interopRequireDefault(require("./use-click-outside"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -42,13 +43,10 @@ const VirtualInput = (0, _react.forwardRef)((props, ref) => {
   const touchMoveTimeoutRef = (0, _react.useRef)();
   const clearIcon = (0, _withDefaultProps.mergeProp)(_react.default.createElement(_antdMobileIcons.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;
   }
   (0, _react.useEffect)(() => {
@@ -80,23 +78,29 @@ const VirtualInput = (0, _react.forwardRef)((props, ref) => {
   (0, _react.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);
   }
+  (0, _useClickOutside.default)(() => {
+    setBlur();
+  }, rootRef);
   const keyboard = mergedProps.keyboard;
   const keyboardElement = keyboard && _react.default.cloneElement(keyboard, {
     onInput: v => {
@@ -124,26 +128,20 @@ const VirtualInput = (0, _react.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 => {
@@ -212,23 +210,27 @@ const VirtualInput = (0, _react.forwardRef)((props, ref) => {
     ref: rootRef,
     className: (0, _classnames.default)(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.default.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.default.createElement("span", {
+  }, _react.default.createElement("span", {
+    className: `${classPrefix}-trap`
+  }), chars.slice(0, caretPosition).map((i, index) => _react.default.createElement("span", {
     ref: index === 0 ? charRef : undefined,
     key: index,
     onClick: changeCaretPosition(index)

package/es/components/dialog/dialog.d.ts

@@ -1,7 +1,7 @@
 import type { FC, ReactNode } from 'react';
-import { Action } from './dialog-action-button';
 import { NativeProps } from '../../utils/native-props';
 import { CenterPopupProps } from '../center-popup';
+import { Action } from './dialog-action-button';
 export declare type DialogProps = Pick<CenterPopupProps, 'afterClose' | 'afterShow' | 'bodyClassName' | 'bodyStyle' | 'destroyOnClose' | 'disableBodyScroll' | 'forceRender' | 'getContainer' | 'maskClassName' | 'maskStyle' | 'stopPropagation' | 'visible'> & {
     image?: string;
     header?: ReactNode;
@@ -12,5 +12,5 @@ export declare type DialogProps = Pick<CenterPopupProps, 'afterClose' | 'afterSh
     onClose?: () => void;
     closeOnAction?: boolean;
     closeOnMaskClick?: boolean;
-} & NativeProps;
+} & NativeProps<'--background-color' | '--border-radius' | '--max-width' | '--min-width' | '--z-index'>;
 export declare const Dialog: FC<DialogProps>;

package/es/components/dialog/dialog.js

@@ -1,11 +1,11 @@
 import { __awaiter } from "tslib";
+import classNames from 'classnames';
 import React from 'react';
 import { mergeProps } from '../../utils/with-default-props';
-import classNames from 'classnames';
-import { DialogActionButton } from './dialog-action-button';
-import Image from '../image';
 import AutoCenter from '../auto-center';
 import CenterPopup from '../center-popup';
+import Image from '../image';
+import { DialogActionButton } from './dialog-action-button';
 const defaultProps = {
   actions: [],
   closeOnAction: false,

package/es/components/modal/modal.d.ts

@@ -1,7 +1,7 @@
 import type { FC, ReactNode } from 'react';
-import { Action } from './modal-action-button';
 import { NativeProps } from '../../utils/native-props';
 import { CenterPopupProps } from '../center-popup';
+import { Action } from './modal-action-button';
 export declare type ModalProps = Pick<CenterPopupProps, 'afterClose' | 'afterShow' | 'bodyClassName' | 'bodyStyle' | 'destroyOnClose' | 'disableBodyScroll' | 'forceRender' | 'getContainer' | 'maskClassName' | 'maskStyle' | 'stopPropagation' | 'visible'> & {
     image?: string;
     header?: ReactNode;
@@ -13,5 +13,5 @@ export declare type ModalProps = Pick<CenterPopupProps, 'afterClose' | 'afterSho
     closeOnAction?: boolean;
     closeOnMaskClick?: boolean;
     showCloseButton?: boolean;
-} & NativeProps;
+} & NativeProps<'--background-color' | '--border-radius' | '--max-width' | '--min-width' | '--z-index'>;
 export declare const Modal: FC<ModalProps>;

package/es/components/modal/modal.js

@@ -1,12 +1,12 @@
 import { __awaiter } from "tslib";
+import classNames from 'classnames';
 import React from 'react';
 import { mergeProps } from '../../utils/with-default-props';
-import classNames from 'classnames';
-import { ModalActionButton } from './modal-action-button';
-import Image from '../image';
-import Space from '../space';
 import AutoCenter from '../auto-center';
 import CenterPopup from '../center-popup';
+import Image from '../image';
+import Space from '../space';
+import { ModalActionButton } from './modal-action-button';
 const defaultProps = {
   actions: [],
   closeOnAction: false,

package/es/components/number-keyboard/number-keyboard.js

@@ -69,7 +69,6 @@ export const NumberKeyboard = p => {
   };
   const onKeyPress = (e, key) => {
     var _a, _b;
-    e.preventDefault();
     switch (key) {
       case 'BACKSPACE':
         onDelete === null || onDelete === void 0 ? void 0 : onDelete();
@@ -106,6 +105,15 @@ export const NumberKeyboard = p => {
       tabIndex: -1
     }, React.createElement(DownOutline, null)));
   };
+  const onBackspaceTouchStart = () => {
+    stopContinueClear();
+    startContinueClear();
+  };
+  const onBackspaceTouchEnd = e => {
+    e.preventDefault(); // 短按时，touchend 会阻止后续 click 事件触发，防止删除两次
+    stopContinueClear();
+    onKeyPress(e, 'BACKSPACE');
+  };
   const renderKey = (key, index) => {
     const isNumberKey = /^\d$/.test(key);
     const isBackspace = key === 'BACKSPACE';
@@ -123,17 +131,13 @@ export const NumberKeyboard = p => {
       key: key,
       className: className,
       // 仅为  backspace 绑定，支持长按快速删除
-      onTouchStart: isBackspace ? () => {
-        stopContinueClear();
-        startContinueClear();
-      } : undefined,
-      onTouchEnd: isBackspace ? e => {
-        stopContinueClear();
-        onKeyPress(e, key);
-      } : undefined,
+      onTouchStart: isBackspace ? onBackspaceTouchStart : undefined,
+      onTouchEnd: isBackspace ? onBackspaceTouchEnd : undefined,
+      onTouchCancel: isBackspace ? stopContinueClear : undefined,
       // <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: e => {
         stopContinueClear();
         onKeyPress(e, key);
@@ -152,10 +156,7 @@ export const NumberKeyboard = p => {
     forceRender: props.forceRender
   }, withNativeProps(props, React.createElement("div", {
     ref: keyboardRef,
-    className: classPrefix,
-    onMouseDown: e => {
-      e.preventDefault();
-    }
+    className: classPrefix
   }, renderHeader(), React.createElement("div", {
     className: `${classPrefix}-wrapper`
   }, React.createElement("div", {
@@ -166,13 +167,9 @@ export const NumberKeyboard = p => {
     className: `${classPrefix}-confirm`
   }, React.createElement("div", {
     className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-bs`,
-    onTouchStart: () => {
-      startContinueClear();
-    },
-    onTouchEnd: e => {
-      stopContinueClear();
-      onKeyPress(e, 'BACKSPACE');
-    },
+    onTouchStart: onBackspaceTouchStart,
+    onTouchEnd: onBackspaceTouchEnd,
+    onTouchCancel: stopContinueClear,
     onClick: e => {
       stopContinueClear();
       onKeyPress(e, 'BACKSPACE');

package/es/components/virtual-input/use-click-outside.d.ts

@@ -0,0 +1,2 @@
+declare function useClickOutside(handler: (event: MouseEvent) => void, ref: React.RefObject<HTMLElement>): void;
+export default useClickOutside;

package/es/components/virtual-input/use-click-outside.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+// 监听点击组件外部的事件
+function useClickOutside(handler, ref) {
+  useEffect(() => {
+    function handleClick(event) {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    }
+    // 在捕获阶段监听，以确保在事件被阻止传播之前触发
+    document.addEventListener('click', handleClick, true);
+    return () => {
+      document.removeEventListener('click', handleClick, true);
+    };
+  }, [handler, ref]);
+}
+export default useClickOutside;

package/es/components/virtual-input/virtual-input.css

@@ -36,6 +36,12 @@
 .adm-virtual-input-content::-webkit-scrollbar {
   display: none;
 }
+.adm-virtual-input-trap {
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  opacity: 0;
+}
 .adm-virtual-input-placeholder {
   display: block;
   position: absolute;
@@ -66,10 +72,10 @@
   left: 0;
   z-index: 1;
 }
-.adm-virtual-input:focus {
+.adm-virtual-input-focused {
   outline: none;
 }
-.adm-virtual-input:focus .adm-virtual-input-caret {
+.adm-virtual-input-focused .adm-virtual-input-caret {
   animation-name: adm-caret-blink;
   animation-duration: 1s;
   animation-timing-function: linear;

package/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/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"