antd-mobile 5.42.2-alpha.0 → 5.42.2-alpha.2

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

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

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 // 监听点击组件外部的事件
-function useClickOutside(handler, ref) {
+function useClickOutside(handler, ref, hasKeyboardProps = false) {
   (0, _react.useEffect)(() => {
     function handleClick(event) {
       if (!ref.current || ref.current.contains(event.target)) {
@@ -14,10 +14,16 @@ function useClickOutside(handler, ref) {
       }
       handler(event);
     }
-    // 在捕获阶段监听，以确保在事件被阻止传播之前触发
-    document.addEventListener('click', handleClick, true);
+    // 向前兼容逻辑：
+    // 1. 对于有键盘属性的 VirtualInput，在捕获阶段监听：
+    //      这是为了确保在事件被阻止传播之前触发。比如输入框中的单个数字 click 事件会 stopPropagation, 但这里依然能捕获到
+    // 2. 对于无键盘属性的 VirtualInput 组件，在冒泡阶段监听：
+    //      这种情况通常是 VirtualInput + NumberKeyboard 为兄弟关系，在以前版本中点击 NumberKeyboard **不会**触发 VirtualInput 的 blur 事件
+    //      原先原理：通过 NumberKeyboard 内部 onMouseDown 时 preventDefault 阻止的 VirtualInput 内原生的 blur 事件
+    //      新的原理：NumberKeyboard 的 Popup 默认会 stopPropagation click, 这里在冒泡阶段监听不到，不会调用 VirtualInput 的 onBlur 回调（非原生事件）。
+    document.addEventListener('click', handleClick, hasKeyboardProps ? true : false);
     return () => {
-      document.removeEventListener('click', handleClick, true);
+      document.removeEventListener('click', handleClick, hasKeyboardProps ? true : false);
     };
   }, [handler, ref]);
 }

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

@@ -100,7 +100,7 @@ const VirtualInput = (0, _react.forwardRef)((props, ref) => {
   }
   (0, _useClickOutside.default)(() => {
     setBlur();
-  }, rootRef);
+  }, rootRef, !!mergedProps.keyboard);
   const keyboard = mergedProps.keyboard;
   const keyboardElement = keyboard && _react.default.cloneElement(keyboard, {
     onInput: v => {
@@ -128,15 +128,23 @@ const VirtualInput = (0, _react.forwardRef)((props, ref) => {
     },
     visible: hasFocus,
     onClose: () => {
-      var _a, _b;
+      var _a, _b, _c;
+      const activeElement = document.activeElement;
+      if (activeElement === contentRef.current) {
+        // 点击 NumberKeyboard 的确认和关闭时不会触发输入框的 blur 事件，手动调用让其失焦，否则之后无法 focus
+        (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
       setBlur();
-      (_b = (_a = keyboard.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+      (_c = (_b = keyboard.props).onClose) === null || _c === void 0 ? void 0 : _c.call(_b);
     },
     getContainer: null
   });
   // 点击输入框时，将光标置于最后
   const setCaretPositionToEnd = e => {
     var _a, _b, _c;
+    if (mergedProps.disabled) {
+      return;
+    }
     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);

package/cjs/utils/with-stop-propagation.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
 import type { ReactElement } from 'react';
+import React from 'react';
 export declare type PropagationEvent = 'click' | 'touchstart';
-export declare function withStopPropagation(events: PropagationEvent[], element: ReactElement): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare function withStopPropagation(events: PropagationEvent[], element: ReactElement): ReactElement<any, string | React.JSXElementConstructor<any>>;

package/cjs/utils/with-stop-propagation.js

@@ -17,6 +17,11 @@ function withStopPropagation(events, element) {
     props[prop] = function (e) {
       var _a, _b;
       e.stopPropagation();
+      // react <=16 事件绑定在 document，因此上面的 stopPropagation 无法阻止事件冒泡到用原生方式监听的 document 的事件回调中
+      // 增加 stopImmediatePropagation 可以阻止事件在**后绑定**的 document 上的回调执行
+      // 专用于解决 VirtualInput useClickOutside 的问题
+      // react >=17 则无此问题，事件会绑定在 React 根节点上
+      e.nativeEvent.stopImmediatePropagation();
       (_b = (_a = element.props)[prop]) === null || _b === void 0 ? void 0 : _b.call(_a, e);
     };
   }

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

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

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

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 // 监听点击组件外部的事件
-function useClickOutside(handler, ref) {
+function useClickOutside(handler, ref, hasKeyboardProps = false) {
   useEffect(() => {
     function handleClick(event) {
       if (!ref.current || ref.current.contains(event.target)) {
@@ -8,10 +8,16 @@ function useClickOutside(handler, ref) {
       }
       handler(event);
     }
-    // 在捕获阶段监听，以确保在事件被阻止传播之前触发
-    document.addEventListener('click', handleClick, true);
+    // 向前兼容逻辑：
+    // 1. 对于有键盘属性的 VirtualInput，在捕获阶段监听：
+    //      这是为了确保在事件被阻止传播之前触发。比如输入框中的单个数字 click 事件会 stopPropagation, 但这里依然能捕获到
+    // 2. 对于无键盘属性的 VirtualInput 组件，在冒泡阶段监听：
+    //      这种情况通常是 VirtualInput + NumberKeyboard 为兄弟关系，在以前版本中点击 NumberKeyboard **不会**触发 VirtualInput 的 blur 事件
+    //      原先原理：通过 NumberKeyboard 内部 onMouseDown 时 preventDefault 阻止的 VirtualInput 内原生的 blur 事件
+    //      新的原理：NumberKeyboard 的 Popup 默认会 stopPropagation click, 这里在冒泡阶段监听不到，不会调用 VirtualInput 的 onBlur 回调（非原生事件）。
+    document.addEventListener('click', handleClick, hasKeyboardProps ? true : false);
     return () => {
-      document.removeEventListener('click', handleClick, true);
+      document.removeEventListener('click', handleClick, hasKeyboardProps ? true : false);
     };
   }, [handler, ref]);
 }

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

@@ -91,7 +91,7 @@ export const VirtualInput = forwardRef((props, ref) => {
   }
   useClickOutside(() => {
     setBlur();
-  }, rootRef);
+  }, rootRef, !!mergedProps.keyboard);
   const keyboard = mergedProps.keyboard;
   const keyboardElement = keyboard && React.cloneElement(keyboard, {
     onInput: v => {
@@ -119,15 +119,23 @@ export const VirtualInput = forwardRef((props, ref) => {
     },
     visible: hasFocus,
     onClose: () => {
-      var _a, _b;
+      var _a, _b, _c;
+      const activeElement = document.activeElement;
+      if (activeElement === contentRef.current) {
+        // 点击 NumberKeyboard 的确认和关闭时不会触发输入框的 blur 事件，手动调用让其失焦，否则之后无法 focus
+        (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
       setBlur();
-      (_b = (_a = keyboard.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+      (_c = (_b = keyboard.props).onClose) === null || _c === void 0 ? void 0 : _c.call(_b);
     },
     getContainer: null
   });
   // 点击输入框时，将光标置于最后
   const setCaretPositionToEnd = e => {
     var _a, _b, _c;
+    if (mergedProps.disabled) {
+      return;
+    }
     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);

package/es/utils/with-stop-propagation.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
 import type { ReactElement } from 'react';
+import React from 'react';
 export declare type PropagationEvent = 'click' | 'touchstart';
-export declare function withStopPropagation(events: PropagationEvent[], element: ReactElement): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare function withStopPropagation(events: PropagationEvent[], element: ReactElement): ReactElement<any, string | React.JSXElementConstructor<any>>;

package/es/utils/with-stop-propagation.js

@@ -10,6 +10,11 @@ export function withStopPropagation(events, element) {
     props[prop] = function (e) {
       var _a, _b;
       e.stopPropagation();
+      // react <=16 事件绑定在 document，因此上面的 stopPropagation 无法阻止事件冒泡到用原生方式监听的 document 的事件回调中
+      // 增加 stopImmediatePropagation 可以阻止事件在**后绑定**的 document 上的回调执行
+      // 专用于解决 VirtualInput useClickOutside 的问题
+      // react >=17 则无此问题，事件会绑定在 React 根节点上
+      e.nativeEvent.stopImmediatePropagation();
       (_b = (_a = element.props)[prop]) === null || _b === void 0 ? void 0 : _b.call(_a, e);
     };
   }

package/package.json

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