@rc-component/select 1.6.11 → 1.6.13

package/es/SelectInput/Content/SingleContent.js

@@ -16,7 +16,8 @@ const SingleContent = /*#__PURE__*/React.forwardRef(({
     activeValue,
     displayValues,
     maxLength,
-    mode
+    mode,
+    components
   } = useSelectInputContext();
   const {
     triggerOpen,
@@ -68,7 +69,9 @@ const SingleContent = /*#__PURE__*/React.forwardRef(({
   const showHasValueCls = displayValue && displayValue.label !== null && displayValue.label !== undefined && String(displayValue.label).trim() !== '';
 
   // Render value
-  const renderValue = displayValue ? hasOptionStyle ? /*#__PURE__*/React.createElement("div", {
+  // Only render value when not using custom input in combobox mode
+  const shouldRenderValue = !(combobox && components?.input);
+  const renderValue = shouldRenderValue ? displayValue ? hasOptionStyle ? /*#__PURE__*/React.createElement("div", {
     className: clsx(`${prefixCls}-content-value`, optionClassName),
     style: {
       ...(mergedSearchValue ? {
@@ -79,8 +82,7 @@ const SingleContent = /*#__PURE__*/React.forwardRef(({
     title: optionTitle
   }, displayValue.label) : displayValue.label : /*#__PURE__*/React.createElement(Placeholder, {
     show: !mergedSearchValue
-  });
-
+  }) : null;
   // Render
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(`${prefixCls}-content`, showHasValueCls && `${prefixCls}-content-has-value`, mergedSearchValue && `${prefixCls}-content-has-search-value`, hasOptionStyle && `${prefixCls}-content-has-option-style`, classNames?.content),

package/es/SelectInput/index.js

@@ -114,13 +114,18 @@ export default /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
       // When icon is dynamic render, the parentNode will miss
       // so we need to mark the event directly
       event.nativeEvent._ori_target = inputDOM;
-      if (inputDOM && event.target !== inputDOM && !inputDOM.contains(event.target)) {
+      const isClickOnInput = inputDOM === event.target || inputDOM?.contains(event.target);
+      if (inputDOM && !isClickOnInput) {
         event.preventDefault();
       }
 
       // Check if we should prevent closing when clicking on selector
       // Don't close if: open && not multiple && (combobox mode || showSearch)
-      const shouldPreventClose = triggerOpen && !multiple && (mode === 'combobox' || showSearch);
+      const shouldPreventCloseOnSingle = triggerOpen && !multiple && (mode === 'combobox' || showSearch);
+
+      // Don't close if: open && multiple && click on input
+      const shouldPreventCloseOnMultipleInput = triggerOpen && multiple && isClickOnInput;
+      const shouldPreventClose = shouldPreventCloseOnSingle || shouldPreventCloseOnMultipleInput;
       if (!event.nativeEvent._select_lazy) {
         inputRef.current?.focus();
 
@@ -154,13 +159,28 @@ export default /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
     onInputKeyDown: onInternalInputKeyDown
   };
   if (RootComponent) {
+    const originProps = RootComponent.props || {};
+    const mergedProps = {
+      ...originProps,
+      ...domProps
+    };
+    Object.keys(originProps).forEach(key => {
+      const originVal = originProps[key];
+      const domVal = domProps[key];
+      if (typeof originVal === 'function' && typeof domVal === 'function') {
+        mergedProps[key] = (...args) => {
+          domVal(...args);
+          originVal(...args);
+        };
+      }
+    });
     if ( /*#__PURE__*/React.isValidElement(RootComponent)) {
       return /*#__PURE__*/React.cloneElement(RootComponent, {
-        ...domProps,
+        ...mergedProps,
         ref: composeRef(RootComponent.ref, rootRef)
       });
     }
-    return /*#__PURE__*/React.createElement(RootComponent, _extends({}, domProps, {
+    return /*#__PURE__*/React.createElement(RootComponent, _extends({}, mergedProps, {
       ref: rootRef
     }));
   }

package/lib/SelectInput/Content/SingleContent.js

@@ -25,7 +25,8 @@ const SingleContent = /*#__PURE__*/React.forwardRef(({
     activeValue,
     displayValues,
     maxLength,
-    mode
+    mode,
+    components
   } = (0, _context.useSelectInputContext)();
   const {
     triggerOpen,
@@ -77,7 +78,9 @@ const SingleContent = /*#__PURE__*/React.forwardRef(({
   const showHasValueCls = displayValue && displayValue.label !== null && displayValue.label !== undefined && String(displayValue.label).trim() !== '';
 
   // Render value
-  const renderValue = displayValue ? hasOptionStyle ? /*#__PURE__*/React.createElement("div", {
+  // Only render value when not using custom input in combobox mode
+  const shouldRenderValue = !(combobox && components?.input);
+  const renderValue = shouldRenderValue ? displayValue ? hasOptionStyle ? /*#__PURE__*/React.createElement("div", {
     className: (0, _clsx.clsx)(`${prefixCls}-content-value`, optionClassName),
     style: {
       ...(mergedSearchValue ? {
@@ -88,8 +91,7 @@ const SingleContent = /*#__PURE__*/React.forwardRef(({
     title: optionTitle
   }, displayValue.label) : displayValue.label : /*#__PURE__*/React.createElement(_Placeholder.default, {
     show: !mergedSearchValue
-  });
-
+  }) : null;
   // Render
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _clsx.clsx)(`${prefixCls}-content`, showHasValueCls && `${prefixCls}-content-has-value`, mergedSearchValue && `${prefixCls}-content-has-search-value`, hasOptionStyle && `${prefixCls}-content-has-option-style`, classNames?.content),

package/lib/SelectInput/index.js

@@ -123,13 +123,18 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function SelectIn
       // When icon is dynamic render, the parentNode will miss
       // so we need to mark the event directly
       event.nativeEvent._ori_target = inputDOM;
-      if (inputDOM && event.target !== inputDOM && !inputDOM.contains(event.target)) {
+      const isClickOnInput = inputDOM === event.target || inputDOM?.contains(event.target);
+      if (inputDOM && !isClickOnInput) {
         event.preventDefault();
       }
 
       // Check if we should prevent closing when clicking on selector
       // Don't close if: open && not multiple && (combobox mode || showSearch)
-      const shouldPreventClose = triggerOpen && !multiple && (mode === 'combobox' || showSearch);
+      const shouldPreventCloseOnSingle = triggerOpen && !multiple && (mode === 'combobox' || showSearch);
+
+      // Don't close if: open && multiple && click on input
+      const shouldPreventCloseOnMultipleInput = triggerOpen && multiple && isClickOnInput;
+      const shouldPreventClose = shouldPreventCloseOnSingle || shouldPreventCloseOnMultipleInput;
       if (!event.nativeEvent._select_lazy) {
         inputRef.current?.focus();
 
@@ -163,13 +168,28 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function SelectIn
     onInputKeyDown: onInternalInputKeyDown
   };
   if (RootComponent) {
+    const originProps = RootComponent.props || {};
+    const mergedProps = {
+      ...originProps,
+      ...domProps
+    };
+    Object.keys(originProps).forEach(key => {
+      const originVal = originProps[key];
+      const domVal = domProps[key];
+      if (typeof originVal === 'function' && typeof domVal === 'function') {
+        mergedProps[key] = (...args) => {
+          domVal(...args);
+          originVal(...args);
+        };
+      }
+    });
     if ( /*#__PURE__*/React.isValidElement(RootComponent)) {
       return /*#__PURE__*/React.cloneElement(RootComponent, {
-        ...domProps,
+        ...mergedProps,
         ref: (0, _ref.composeRef)(RootComponent.ref, rootRef)
       });
     }
-    return /*#__PURE__*/React.createElement(RootComponent, _extends({}, domProps, {
+    return /*#__PURE__*/React.createElement(RootComponent, _extends({}, mergedProps, {
       ref: rootRef
     }));
   }

package/package.json

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