antd-mobile 5.42.1 → 5.42.2-alpha.1

package/2x/bundle/style.css

@@ -2963,6 +2963,10 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   margin-right: var(--gap-horizontal);
 }
 
+.adm-space-horizontal>.adm-space-item:last-child {
+  margin-right: 0;
+}
+
 .adm-space-horizontal.adm-space-wrap {
   flex-wrap: wrap;
   margin-bottom: calc(var(--gap-vertical) * -1);
@@ -5710,6 +5714,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   overflow-x: scroll;
   letter-spacing: 2px;
   padding-right: var(--caret-width);
+  outline: none;
   scrollbar-width: none;
 }
 

package/2x/cjs/components/space/space.css

@@ -33,6 +33,10 @@
   margin-right: var(--gap-horizontal);
 }
 
+.adm-space-horizontal > .adm-space-item:last-child {
+  margin-right: 0;
+}
+
 .adm-space-horizontal.adm-space-wrap {
   flex-wrap: wrap;
   margin-bottom: calc(var(--gap-vertical) * -1);

package/2x/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/2x/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/2x/cjs/components/virtual-input/virtual-input.css

@@ -32,6 +32,7 @@
   overflow-x: scroll;
   letter-spacing: 2px;
   padding-right: var(--caret-width);
+  outline: none;
   scrollbar-width: none;
 }
 

package/2x/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/2x/es/components/space/space.css

@@ -33,6 +33,10 @@
   margin-right: var(--gap-horizontal);
 }
 
+.adm-space-horizontal > .adm-space-item:last-child {
+  margin-right: 0;
+}
+
 .adm-space-horizontal.adm-space-wrap {
   flex-wrap: wrap;
   margin-bottom: calc(var(--gap-vertical) * -1);

package/2x/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/2x/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/2x/es/components/virtual-input/virtual-input.css

@@ -32,6 +32,7 @@
   overflow-x: scroll;
   letter-spacing: 2px;
   padding-right: var(--caret-width);
+  outline: none;
   scrollbar-width: none;
 }
 

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

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.42.1",
+  "version": "5.42.2-alpha.1",
   "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

@@ -27604,7 +27604,7 @@ const Multiple = (p) => {
 const index = attachPropertiesToComponent(TreeSelect, {
   Multiple
 });
-function useClickOutside(handler, ref2) {
+function useClickOutside(handler, ref2, hasKeyboardProps = false) {
   React$3.useEffect(() => {
     function handleClick(event) {
       if (!ref2.current || ref2.current.contains(event.target)) {
@@ -27612,9 +27612,9 @@ function useClickOutside(handler, ref2) {
       }
       handler(event);
     }
-    document.addEventListener("click", handleClick, true);
+    document.addEventListener("click", handleClick, hasKeyboardProps ? true : false);
     return () => {
-      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("click", handleClick, hasKeyboardProps ? true : false);
     };
   }, [handler, ref2]);
 }
@@ -27702,7 +27702,7 @@ const VirtualInput = React$3.forwardRef((props, ref2) => {
   }
   useClickOutside(() => {
     setBlur();
-  }, rootRef);
+  }, rootRef, !!mergedProps.keyboard);
   const keyboard = mergedProps.keyboard;
   const keyboardElement = keyboard && React$3.cloneElement(keyboard, {
     onInput: (v) => {
@@ -27729,14 +27729,21 @@ const VirtualInput = React$3.forwardRef((props, ref2) => {
     },
     visible: hasFocus,
     onClose: () => {
-      var _a, _b;
+      var _a, _b, _c;
+      const activeElement = document.activeElement;
+      if (activeElement === contentRef.current) {
+        (_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 = (e2) => {
     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);