antd-mobile 5.41.1 → 5.42.0-alpha.1

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.1",
   "homepage": "https://github.com/ant-design/ant-design-mobile#readme",
   "bugs": {
     "url": "https://github.com/ant-design/ant-design-mobile/issues"