@rc-component/select 1.2.3 → 1.2.5

package/es/BaseSelect/index.js

@@ -5,11 +5,11 @@ import * as React from 'react';
 import { useAllowClear } from "../hooks/useAllowClear";
 import { BaseSelectContext } from "../hooks/useBaseProps";
 import useLock from "../hooks/useLock";
-import useSelectTriggerControl from "../hooks/useSelectTriggerControl";
+import useSelectTriggerControl, { isInside } from "../hooks/useSelectTriggerControl";
 import SelectTrigger from "../SelectTrigger";
 import { getSeparatedContent, isValidCount } from "../utils/valueUtil";
 import Polite from "./Polite";
-import useOpen from "../hooks/useOpen";
+import useOpen, { macroTask } from "../hooks/useOpen";
 import { useEvent } from '@rc-component/util';
 import SelectInput from "../SelectInput";
 import useComponents from "../hooks/useComponents";
@@ -288,6 +288,12 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     keyLockRef.current = false;
   };
 
+  // ========================== Focus / Blur ==========================
+  const getSelectElements = () => [getDOM(containerRef.current), triggerRef.current?.getPopupElement()];
+
+  // Close when click on non-select element
+  useSelectTriggerControl(getSelectElements, mergedOpen, triggerOpen, !!mergedComponents.root);
+
   // ========================== Focus / Blur ==========================
   /** Record real focus status */
   // const focusRef = React.useRef<boolean>(false);
@@ -302,6 +308,13 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       onFocus?.(event);
     }
   };
+  const onRootBlur = () => {
+    macroTask(() => {
+      if (!isInside(getSelectElements(), document.activeElement)) {
+        triggerOpen(false);
+      }
+    });
+  };
   const onInternalBlur = event => {
     setFocused(false);
     if (mergedSearchValue) {
@@ -317,6 +330,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
         });
       }
     }
+    onRootBlur();
     if (!disabled) {
       onBlur?.(event);
     }
@@ -352,9 +366,6 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     };
   }
 
-  // Close when click on non-select element
-  useSelectTriggerControl(() => [getDOM(containerRef.current), triggerRef.current?.getPopupElement()], mergedOpen, triggerOpen, !!mergedComponents.root);
-
   // ============================ Context =============================
   const baseSelectContext = React.useMemo(() => ({
     ...props,
@@ -488,7 +499,8 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     empty: emptyOptions,
     onPopupVisibleChange: onTriggerVisibleChange,
     onPopupMouseEnter: onPopupMouseEnter,
-    onPopupMouseDown: onInternalMouseDown
+    onPopupMouseDown: onInternalMouseDown,
+    onPopupBlur: onRootBlur
   }, renderNode);
   return /*#__PURE__*/React.createElement(BaseSelectContext.Provider, {
     value: baseSelectContext

package/es/Select.d.ts

@@ -125,7 +125,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     classNames?: Partial<Record<SemanticName, string>>;
     styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
-declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;
     OptGroup: typeof OptGroup;
 };

package/es/SelectInput/index.js

@@ -10,7 +10,6 @@ import { isValidateOpenKey } from "../utils/keyUtil";
 import { clsx } from 'clsx';
 import { getDOM } from "@rc-component/util/es/Dom/findDOMNode";
 import { composeRef } from "@rc-component/util/es/ref";
-import { macroTask } from "../hooks/useOpen";
 const DEFAULT_OMIT_PROPS = ['value', 'onChange', 'removeIcon', 'placeholder', 'maxTagCount', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'onPopupScroll', 'tabIndex', 'activeValue', 'onSelectorRemove', 'focused'];
 export default /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
   const {
@@ -38,7 +37,6 @@ export default /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
     autoFocus,
     // Events
     onMouseDown,
-    onBlur,
     onClearMouseDown,
     onInputKeyDown,
     onSelectorRemove,
@@ -107,6 +105,11 @@ export default /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
   // ====================== Open ======================
   const onInternalMouseDown = useEvent(event => {
     if (!disabled) {
+      // https://github.com/ant-design/ant-design/issues/56002
+      // Tell `useSelectTriggerControl` to ignore this event
+      // When icon is dynamic render, the parentNode will miss
+      // so we need to mark the event directly
+      event.nativeEvent._ignore_global_close = true;
       const inputDOM = getDOM(inputRef.current);
       if (inputDOM && event.target !== inputDOM && !inputDOM.contains(event.target)) {
         event.preventDefault();
@@ -129,15 +132,6 @@ export default /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
     }
     onMouseDown?.(event);
   });
-  const onInternalBlur = event => {
-    macroTask(() => {
-      const inputNode = getDOM(inputRef.current);
-      if (!inputNode || inputNode !== document.activeElement && !inputNode.contains(document.activeElement)) {
-        toggleOpen(false);
-      }
-    });
-    onBlur?.(event);
-  };
 
   // =================== Components ===================
   const {
@@ -172,8 +166,7 @@ export default /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
     style: style
     // Mouse Events
     ,
-    onMouseDown: onInternalMouseDown,
-    onBlur: onInternalBlur
+    onMouseDown: onInternalMouseDown
   }), /*#__PURE__*/React.createElement(Affix, {
     className: clsx(`${prefixCls}-prefix`, classNames?.prefix),
     style: styles?.prefix

package/es/SelectTrigger.d.ts

@@ -25,6 +25,7 @@ export interface SelectTriggerProps {
     onPopupVisibleChange?: (visible: boolean) => void;
     onPopupMouseEnter: () => void;
     onPopupMouseDown: React.MouseEventHandler<HTMLDivElement>;
+    onPopupBlur?: React.FocusEventHandler<HTMLDivElement>;
 }
 declare const RefSelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<RefTriggerProps>>;
 export default RefSelectTrigger;

package/es/SelectTrigger.js

@@ -66,6 +66,7 @@ const SelectTrigger = (props, ref) => {
     onPopupVisibleChange,
     onPopupMouseEnter,
     onPopupMouseDown,
+    onPopupBlur,
     ...restProps
   } = props;
 
@@ -117,7 +118,8 @@ const SelectTrigger = (props, ref) => {
     },
     popup: /*#__PURE__*/React.createElement("div", {
       onMouseEnter: onPopupMouseEnter,
-      onMouseDown: onPopupMouseDown
+      onMouseDown: onPopupMouseDown,
+      onBlur: onPopupBlur
     }, popupNode),
     ref: triggerPopupRef,
     stretch: stretch,

package/es/hooks/useOpen.js

@@ -66,7 +66,7 @@ export default function useOpen(propOpen, onOpen, postOpen) {
           taskLockRef.current = ignoreNext;
           macroTask(() => {
             taskLockRef.current = false;
-          }, 2);
+          }, 3);
         }
       }
       return;

package/es/hooks/useSelectTriggerControl.d.ts

@@ -1 +1,2 @@
+export declare function isInside(elements: (HTMLElement | SVGElement | undefined)[], target: HTMLElement): boolean;
 export default function useSelectTriggerControl(elements: () => (HTMLElement | SVGElement | undefined)[], open: boolean, triggerOpen: (open: boolean) => void, customizedTrigger: boolean): void;

package/es/hooks/useSelectTriggerControl.js

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { useEvent } from '@rc-component/util';
+export function isInside(elements, target) {
+  return elements.filter(element => element).some(element => element.contains(target) || element === target);
+}
 export default function useSelectTriggerControl(elements, open, triggerOpen, customizedTrigger) {
   const onGlobalMouseDown = useEvent(event => {
     // If trigger is customized, Trigger will take control of popupVisible
@@ -10,7 +13,9 @@ export default function useSelectTriggerControl(elements, open, triggerOpen, cus
     if (target.shadowRoot && event.composed) {
       target = event.composedPath()[0] || target;
     }
-    if (open && elements().filter(element => element).every(element => !element.contains(target) && element !== target)) {
+    if (open &&
+    // Marked by SelectInput mouseDown event
+    !event._ignore_global_close && !isInside(elements(), target)) {
       // Should trigger close
       triggerOpen(false);
     }

package/lib/BaseSelect/index.js

@@ -10,11 +10,11 @@ var React = _interopRequireWildcard(require("react"));
 var _useAllowClear = require("../hooks/useAllowClear");
 var _useBaseProps = require("../hooks/useBaseProps");
 var _useLock = _interopRequireDefault(require("../hooks/useLock"));
-var _useSelectTriggerControl = _interopRequireDefault(require("../hooks/useSelectTriggerControl"));
+var _useSelectTriggerControl = _interopRequireWildcard(require("../hooks/useSelectTriggerControl"));
 var _SelectTrigger = _interopRequireDefault(require("../SelectTrigger"));
 var _valueUtil = require("../utils/valueUtil");
 var _Polite = _interopRequireDefault(require("./Polite"));
-var _useOpen = _interopRequireDefault(require("../hooks/useOpen"));
+var _useOpen = _interopRequireWildcard(require("../hooks/useOpen"));
 var _util = require("@rc-component/util");
 var _SelectInput = _interopRequireDefault(require("../SelectInput"));
 var _useComponents = _interopRequireDefault(require("../hooks/useComponents"));
@@ -297,6 +297,12 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     keyLockRef.current = false;
   };
 
+  // ========================== Focus / Blur ==========================
+  const getSelectElements = () => [(0, _findDOMNode.getDOM)(containerRef.current), triggerRef.current?.getPopupElement()];
+
+  // Close when click on non-select element
+  (0, _useSelectTriggerControl.default)(getSelectElements, mergedOpen, triggerOpen, !!mergedComponents.root);
+
   // ========================== Focus / Blur ==========================
   /** Record real focus status */
   // const focusRef = React.useRef<boolean>(false);
@@ -311,6 +317,13 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       onFocus?.(event);
     }
   };
+  const onRootBlur = () => {
+    (0, _useOpen.macroTask)(() => {
+      if (!(0, _useSelectTriggerControl.isInside)(getSelectElements(), document.activeElement)) {
+        triggerOpen(false);
+      }
+    });
+  };
   const onInternalBlur = event => {
     setFocused(false);
     if (mergedSearchValue) {
@@ -326,6 +339,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
         });
       }
     }
+    onRootBlur();
     if (!disabled) {
       onBlur?.(event);
     }
@@ -361,9 +375,6 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     };
   }
 
-  // Close when click on non-select element
-  (0, _useSelectTriggerControl.default)(() => [(0, _findDOMNode.getDOM)(containerRef.current), triggerRef.current?.getPopupElement()], mergedOpen, triggerOpen, !!mergedComponents.root);
-
   // ============================ Context =============================
   const baseSelectContext = React.useMemo(() => ({
     ...props,
@@ -497,7 +508,8 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     empty: emptyOptions,
     onPopupVisibleChange: onTriggerVisibleChange,
     onPopupMouseEnter: onPopupMouseEnter,
-    onPopupMouseDown: onInternalMouseDown
+    onPopupMouseDown: onInternalMouseDown,
+    onPopupBlur: onRootBlur
   }, renderNode);
   return /*#__PURE__*/React.createElement(_useBaseProps.BaseSelectContext.Provider, {
     value: baseSelectContext

package/lib/Select.d.ts

@@ -125,7 +125,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     classNames?: Partial<Record<SemanticName, string>>;
     styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
-declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;
     OptGroup: typeof OptGroup;
 };

package/lib/SelectInput/index.js

@@ -15,7 +15,6 @@ var _keyUtil = require("../utils/keyUtil");
 var _clsx = require("clsx");
 var _findDOMNode = require("@rc-component/util/lib/Dom/findDOMNode");
 var _ref = require("@rc-component/util/lib/ref");
-var _useOpen = require("../hooks/useOpen");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -47,7 +46,6 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function SelectIn
     autoFocus,
     // Events
     onMouseDown,
-    onBlur,
     onClearMouseDown,
     onInputKeyDown,
     onSelectorRemove,
@@ -116,6 +114,11 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function SelectIn
   // ====================== Open ======================
   const onInternalMouseDown = (0, _util.useEvent)(event => {
     if (!disabled) {
+      // https://github.com/ant-design/ant-design/issues/56002
+      // Tell `useSelectTriggerControl` to ignore this event
+      // When icon is dynamic render, the parentNode will miss
+      // so we need to mark the event directly
+      event.nativeEvent._ignore_global_close = true;
       const inputDOM = (0, _findDOMNode.getDOM)(inputRef.current);
       if (inputDOM && event.target !== inputDOM && !inputDOM.contains(event.target)) {
         event.preventDefault();
@@ -138,15 +141,6 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function SelectIn
     }
     onMouseDown?.(event);
   });
-  const onInternalBlur = event => {
-    (0, _useOpen.macroTask)(() => {
-      const inputNode = (0, _findDOMNode.getDOM)(inputRef.current);
-      if (!inputNode || inputNode !== document.activeElement && !inputNode.contains(document.activeElement)) {
-        toggleOpen(false);
-      }
-    });
-    onBlur?.(event);
-  };
 
   // =================== Components ===================
   const {
@@ -181,8 +175,7 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function SelectIn
     style: style
     // Mouse Events
     ,
-    onMouseDown: onInternalMouseDown,
-    onBlur: onInternalBlur
+    onMouseDown: onInternalMouseDown
   }), /*#__PURE__*/React.createElement(_Affix.default, {
     className: (0, _clsx.clsx)(`${prefixCls}-prefix`, classNames?.prefix),
     style: styles?.prefix

package/lib/SelectTrigger.d.ts

@@ -25,6 +25,7 @@ export interface SelectTriggerProps {
     onPopupVisibleChange?: (visible: boolean) => void;
     onPopupMouseEnter: () => void;
     onPopupMouseDown: React.MouseEventHandler<HTMLDivElement>;
+    onPopupBlur?: React.FocusEventHandler<HTMLDivElement>;
 }
 declare const RefSelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<RefTriggerProps>>;
 export default RefSelectTrigger;

package/lib/SelectTrigger.js

@@ -75,6 +75,7 @@ const SelectTrigger = (props, ref) => {
     onPopupVisibleChange,
     onPopupMouseEnter,
     onPopupMouseDown,
+    onPopupBlur,
     ...restProps
   } = props;
 
@@ -126,7 +127,8 @@ const SelectTrigger = (props, ref) => {
     },
     popup: /*#__PURE__*/React.createElement("div", {
       onMouseEnter: onPopupMouseEnter,
-      onMouseDown: onPopupMouseDown
+      onMouseDown: onPopupMouseDown,
+      onBlur: onPopupBlur
     }, popupNode),
     ref: triggerPopupRef,
     stretch: stretch,

package/lib/hooks/useOpen.js

@@ -73,7 +73,7 @@ function useOpen(propOpen, onOpen, postOpen) {
           taskLockRef.current = ignoreNext;
           macroTask(() => {
             taskLockRef.current = false;
-          }, 2);
+          }, 3);
         }
       }
       return;

package/lib/hooks/useSelectTriggerControl.d.ts

@@ -1 +1,2 @@
+export declare function isInside(elements: (HTMLElement | SVGElement | undefined)[], target: HTMLElement): boolean;
 export default function useSelectTriggerControl(elements: () => (HTMLElement | SVGElement | undefined)[], open: boolean, triggerOpen: (open: boolean) => void, customizedTrigger: boolean): void;

package/lib/hooks/useSelectTriggerControl.js

@@ -4,10 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useSelectTriggerControl;
+exports.isInside = isInside;
 var React = _interopRequireWildcard(require("react"));
 var _util = require("@rc-component/util");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function isInside(elements, target) {
+  return elements.filter(element => element).some(element => element.contains(target) || element === target);
+}
 function useSelectTriggerControl(elements, open, triggerOpen, customizedTrigger) {
   const onGlobalMouseDown = (0, _util.useEvent)(event => {
     // If trigger is customized, Trigger will take control of popupVisible
@@ -18,7 +22,9 @@ function useSelectTriggerControl(elements, open, triggerOpen, customizedTrigger)
     if (target.shadowRoot && event.composed) {
       target = event.composedPath()[0] || target;
     }
-    if (open && elements().filter(element => element).every(element => !element.contains(target) && element !== target)) {
+    if (open &&
+    // Marked by SelectInput mouseDown event
+    !event._ignore_global_close && !isInside(elements(), target)) {
       // Should trigger close
       triggerOpen(false);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/select",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"