funda-ui 4.3.555 → 4.3.721

package/Select/index.js

@@ -3532,8 +3532,8 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     onFocus = props.onFocus,
     attributes = _objectWithoutProperties(props, _excluded);
   var DEPTH = depth || 1055; // the default value same as bootstrap
-  var LIVE_SEARCH_OK = typeof fetchTrigger !== 'undefined' && fetchTrigger === true ? true : false;
-  var LIVE_SEARCH_DISABLED = (typeof fetchTrigger === 'undefined' || fetchTrigger === false) && typeof window !== 'undefined' && typeof window['funda-ui__Select-disable-livesearch'] !== 'undefined' ? true : false; // Globally disable real-time search functionality (only valid for non-dynamic requests)
+  var MANUAL_REQ = typeof fetchTrigger !== 'undefined' && fetchTrigger === true ? true : false; // Manual requests
+  var LIVE_SEARCH_DISABLED = !MANUAL_REQ && typeof window !== 'undefined' && typeof window['funda-ui__Select-disable-livesearch'] !== 'undefined' ? true : false; // Globally disable real-time search functionality (only valid for non-dynamic requests)
 
   var FIRST_REQUEST_AUTO = typeof firstRequestAutoExec === 'undefined' ? true : firstRequestAutoExec;
   var INPUT_READONLY = LIVE_SEARCH_DISABLED ? true : typeof readOnly === 'undefined' ? null : readOnly;
@@ -3865,7 +3865,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             // STEP 4: ===========
             // value & label must be initialized
             filterRes = [];
-            if (fetchTrigger) {
+            if (MANUAL_REQ) {
               // If a manual action is used to trigger the request
               if (typeof fetchTriggerForDefaultData !== 'undefined' && fetchTriggerForDefaultData !== null && typeof (fetchTriggerForDefaultData === null || fetchTriggerForDefaultData === void 0 ? void 0 : fetchTriggerForDefaultData.values[0]) !== 'undefined') {
                 filterRes = [{
@@ -4346,7 +4346,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     // hide list
     setIsOpen(false);
     if (!MULTI_SEL_VALID) popwinPosHide();
-    if (LIVE_SEARCH_OK) {
+    if (MANUAL_REQ) {
       // clean data
       setOptionsData([]);
     } else {
@@ -4394,7 +4394,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         popwinNoMatchInit();
       }, 500);
     }
-    if (LIVE_SEARCH_OK) {
+    if (MANUAL_REQ) {
       // clean data
       setOptionsData([]);
     } else {
@@ -4402,6 +4402,11 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       setOptionsData(orginalData);
     }
 
+    // When you select multiple times, it automatically focuses on the search input box
+    if (MULTI_SEL_VALID) {
+      selectInputRef.current.select();
+    }
+
     // update temporary value
     setControlTempValue('');
 
@@ -4412,6 +4417,10 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
     if (LOCK_BODY_SCROLL) (0,bodyScrollLock.disableBodyScroll)(document.querySelector('body'));
   }
+  function fixFocusStatus() {
+    // When selecting multiple times, in order to avoid losing 
+    if (MULTI_SEL_VALID) handleFocus(selectInputRef.current);
+  }
   function handleSelect(_x5) {
     return _handleSelect.apply(this, arguments);
   }
@@ -4691,7 +4700,10 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
                 selectInputRef.current.blur();
               }
             }
-          case 12:
+
+            // Fixed an out-of-focus issue
+            fixFocusStatus();
+          case 13:
           case "end":
             return _context2.stop();
         }
@@ -4783,6 +4795,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       _values = _values2;
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, multipleSelectionCallback(_values, _labels));
+
+    // Fixed an out-of-focus issue
+    fixFocusStatus();
   }
   function handleCleanValue(event) {
     if (typeof event !== 'undefined') {
@@ -4894,7 +4909,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             inputVal = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : null;
             _oparams = fetchFuncMethodParams || [];
             _params = _oparams.map(function (item) {
-              return item !== '$QUERY_STRING' ? item : fetchTrigger ? '------' : '';
+              return item !== '$QUERY_STRING' ? item : MANUAL_REQ ? '------' : '';
             });
             _context4.next = 5;
             return fetchData(_params.join(','), finalRes(inputVal), inputVal);
@@ -4926,6 +4941,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
 
     //
     handleChangeFetchSafe(val);
+
+    // Fixed an out-of-focus issue
+    fixFocusStatus();
   }
 
   //
@@ -4937,7 +4955,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     setControlTempValue('');
 
     //
-    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(selectInputRef.current);
   }
   function handleBlur(event) {
     var _rootRef$current2;
@@ -4954,7 +4972,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       if (listContentRef.current) listContentRef.current.focus();
     }
     setTimeout(function () {
-      onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(selectInputRef.current);
     }, 300);
   }
   function generateInputFocusStr() {
@@ -5094,6 +5112,16 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     }));
     return _handleKeyPressed.apply(this, arguments);
   }
+  function handleDocOut(e) {
+    if (e.target.closest('.custom-select__options-wrapper') === null && e.target.closest('.custom-select__wrapper') === null) {
+      // cancel
+      cancel();
+      if (MULTI_SEL_VALID) popwinPosHide();
+
+      //
+      handleBlur(null);
+    }
+  }
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     // Call a function when the component has been rendered completely
     //--------------
@@ -5129,6 +5157,19 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       }
     }
   }, []);
+
+  // Fixed an out-of-focus issue
+  //--------------
+  // !!! TIPS:
+  // Fixed: When `fixFocusStatus()` is triggered, the above judgment will be invalidated, and this judgment will be used
+  // Fixed: The pop-up window is not closed due to the mixing of business components
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    document.addEventListener('pointerdown', handleDocOut);
+    return function () {
+      document.removeEventListener('pointerdown', handleDocOut);
+    };
+  }, [orginalData]); // // Avoid the issue that `setOptionsData(orginalData)` sets the original value to empty on the first entry
+
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, label ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "custom-select__label"
   }, typeof label === 'string' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("label", {
@@ -5240,7 +5281,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       'reverse': isOpen
     }),
     style: {
-      display: fetchTrigger ? 'none' : 'inline-block'
+      display: MANUAL_REQ ? 'none' : 'inline-block'
     }
   }, controlArrow ? controlArrow : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
     width: "10px",
@@ -5258,7 +5299,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     transform: "translate(56.000000, 160.000000)"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("path", {
     d: "M144,6525.39 L142.594,6524 L133.987,6532.261 L133.069,6531.38 L133.074,6531.385 L125.427,6524.045 L124,6525.414 C126.113,6527.443 132.014,6533.107 133.987,6535 C135.453,6533.594 134.024,6534.965 144,6525.39"
-  })))))), fetchTrigger ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+  })))))), MANUAL_REQ ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: "custom-select-multi__control-searchbtn"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("button", {
     tabIndex: -1,
@@ -5300,7 +5341,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     className: "custom-select-multi__list"
   }, typeof multiSelectSelectedItemOnlyStatus !== 'undefined' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("li", {
     className: "custom-select-multi__list-item-statusstring"
-  }, typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && controlArr.labels.length > 0 && controlArr.labels.length < optionsData.length ? multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null, typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && controlArr.labels.length === 0 ? multiSelectSelectedItemOnlyStatus.noneLabel : null, controlArr.labels.length > 0 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof multiSelectSelectedItemOnlyStatus.allItemsLabel === 'string' && controlArr.labels.length === optionsData.length ? multiSelectSelectedItemOnlyStatus.allItemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null) : null, typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && controlArr.labels.length > 0 ? MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null, typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && controlArr.labels.length === 0 ? MULTI_SEL_SELECTED_STATUS.noneLabel : null, controlArr.labels.length > 0 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof multiSelectSelectedItemOnlyStatus.allItemsLabel !== 'string' && controlArr.labels.length === optionsData.length ? MULTI_SEL_SELECTED_STATUS.allItemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null) : null)) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof renderSelectedValue === 'function' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, renderSelectedValue(controlArr, handleMultiControlItemRemove)) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, controlArr.labels.map(function (item, index) {
+  }, MANUAL_REQ ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && controlArr.labels.length > 0 ? multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null, typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && controlArr.labels.length === 0 ? multiSelectSelectedItemOnlyStatus.noneLabel : null, typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && controlArr.labels.length > 0 ? MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null, typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && controlArr.labels.length === 0 ? MULTI_SEL_SELECTED_STATUS.noneLabel : null) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && controlArr.labels.length > 0 && controlArr.labels.length < optionsData.length ? multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null, typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && controlArr.labels.length === 0 ? multiSelectSelectedItemOnlyStatus.noneLabel : null, controlArr.labels.length > 0 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof multiSelectSelectedItemOnlyStatus.allItemsLabel === 'string' && controlArr.labels.length === optionsData.length ? multiSelectSelectedItemOnlyStatus.allItemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null) : null, typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && controlArr.labels.length > 0 ? MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null, typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && controlArr.labels.length === 0 ? MULTI_SEL_SELECTED_STATUS.noneLabel : null, controlArr.labels.length > 0 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof multiSelectSelectedItemOnlyStatus.allItemsLabel !== 'string' && controlArr.labels.length === optionsData.length ? MULTI_SEL_SELECTED_STATUS.allItemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null) : null))) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof renderSelectedValue === 'function' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, renderSelectedValue(controlArr, handleMultiControlItemRemove)) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, controlArr.labels.map(function (item, index) {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("li", {
       key: 'selected-item-' + index,
       "data-value": controlArr.values[index],
@@ -5363,7 +5404,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       'reverse': isOpen
     }),
     style: {
-      display: fetchTrigger ? 'none' : 'inline-block'
+      display: MANUAL_REQ ? 'none' : 'inline-block'
     }
   }, controlArrow ? controlArrow : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
     width: "10px",
@@ -5381,7 +5422,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     transform: "translate(56.000000, 160.000000)"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("path", {
     d: "M144,6525.39 L142.594,6524 L133.987,6532.261 L133.069,6531.38 L133.074,6531.385 L125.427,6524.045 L124,6525.414 C126.113,6527.443 132.014,6533.107 133.987,6535 C135.453,6533.594 134.024,6534.965 144,6525.39"
-  })))))), fetchTrigger ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+  })))))), MANUAL_REQ ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: "custom-select-multi__control-searchbtn"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("button", {
     tabIndex: -1,

package/lib/cjs/Select/index.js

@@ -3532,8 +3532,8 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     onFocus = props.onFocus,
     attributes = _objectWithoutProperties(props, _excluded);
   var DEPTH = depth || 1055; // the default value same as bootstrap
-  var LIVE_SEARCH_OK = typeof fetchTrigger !== 'undefined' && fetchTrigger === true ? true : false;
-  var LIVE_SEARCH_DISABLED = (typeof fetchTrigger === 'undefined' || fetchTrigger === false) && typeof window !== 'undefined' && typeof window['funda-ui__Select-disable-livesearch'] !== 'undefined' ? true : false; // Globally disable real-time search functionality (only valid for non-dynamic requests)
+  var MANUAL_REQ = typeof fetchTrigger !== 'undefined' && fetchTrigger === true ? true : false; // Manual requests
+  var LIVE_SEARCH_DISABLED = !MANUAL_REQ && typeof window !== 'undefined' && typeof window['funda-ui__Select-disable-livesearch'] !== 'undefined' ? true : false; // Globally disable real-time search functionality (only valid for non-dynamic requests)
 
   var FIRST_REQUEST_AUTO = typeof firstRequestAutoExec === 'undefined' ? true : firstRequestAutoExec;
   var INPUT_READONLY = LIVE_SEARCH_DISABLED ? true : typeof readOnly === 'undefined' ? null : readOnly;
@@ -3865,7 +3865,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             // STEP 4: ===========
             // value & label must be initialized
             filterRes = [];
-            if (fetchTrigger) {
+            if (MANUAL_REQ) {
               // If a manual action is used to trigger the request
               if (typeof fetchTriggerForDefaultData !== 'undefined' && fetchTriggerForDefaultData !== null && typeof (fetchTriggerForDefaultData === null || fetchTriggerForDefaultData === void 0 ? void 0 : fetchTriggerForDefaultData.values[0]) !== 'undefined') {
                 filterRes = [{
@@ -4346,7 +4346,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     // hide list
     setIsOpen(false);
     if (!MULTI_SEL_VALID) popwinPosHide();
-    if (LIVE_SEARCH_OK) {
+    if (MANUAL_REQ) {
       // clean data
       setOptionsData([]);
     } else {
@@ -4394,7 +4394,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         popwinNoMatchInit();
       }, 500);
     }
-    if (LIVE_SEARCH_OK) {
+    if (MANUAL_REQ) {
       // clean data
       setOptionsData([]);
     } else {
@@ -4402,6 +4402,11 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       setOptionsData(orginalData);
     }
 
+    // When you select multiple times, it automatically focuses on the search input box
+    if (MULTI_SEL_VALID) {
+      selectInputRef.current.select();
+    }
+
     // update temporary value
     setControlTempValue('');
 
@@ -4412,6 +4417,10 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
     if (LOCK_BODY_SCROLL) (0,bodyScrollLock.disableBodyScroll)(document.querySelector('body'));
   }
+  function fixFocusStatus() {
+    // When selecting multiple times, in order to avoid losing 
+    if (MULTI_SEL_VALID) handleFocus(selectInputRef.current);
+  }
   function handleSelect(_x5) {
     return _handleSelect.apply(this, arguments);
   }
@@ -4691,7 +4700,10 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
                 selectInputRef.current.blur();
               }
             }
-          case 12:
+
+            // Fixed an out-of-focus issue
+            fixFocusStatus();
+          case 13:
           case "end":
             return _context2.stop();
         }
@@ -4783,6 +4795,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       _values = _values2;
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, multipleSelectionCallback(_values, _labels));
+
+    // Fixed an out-of-focus issue
+    fixFocusStatus();
   }
   function handleCleanValue(event) {
     if (typeof event !== 'undefined') {
@@ -4894,7 +4909,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             inputVal = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : null;
             _oparams = fetchFuncMethodParams || [];
             _params = _oparams.map(function (item) {
-              return item !== '$QUERY_STRING' ? item : fetchTrigger ? '------' : '';
+              return item !== '$QUERY_STRING' ? item : MANUAL_REQ ? '------' : '';
             });
             _context4.next = 5;
             return fetchData(_params.join(','), finalRes(inputVal), inputVal);
@@ -4926,6 +4941,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
 
     //
     handleChangeFetchSafe(val);
+
+    // Fixed an out-of-focus issue
+    fixFocusStatus();
   }
 
   //
@@ -4937,7 +4955,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     setControlTempValue('');
 
     //
-    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(selectInputRef.current);
   }
   function handleBlur(event) {
     var _rootRef$current2;
@@ -4954,7 +4972,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       if (listContentRef.current) listContentRef.current.focus();
     }
     setTimeout(function () {
-      onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(selectInputRef.current);
     }, 300);
   }
   function generateInputFocusStr() {
@@ -5094,6 +5112,16 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     }));
     return _handleKeyPressed.apply(this, arguments);
   }
+  function handleDocOut(e) {
+    if (e.target.closest('.custom-select__options-wrapper') === null && e.target.closest('.custom-select__wrapper') === null) {
+      // cancel
+      cancel();
+      if (MULTI_SEL_VALID) popwinPosHide();
+
+      //
+      handleBlur(null);
+    }
+  }
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     // Call a function when the component has been rendered completely
     //--------------
@@ -5129,6 +5157,19 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       }
     }
   }, []);
+
+  // Fixed an out-of-focus issue
+  //--------------
+  // !!! TIPS:
+  // Fixed: When `fixFocusStatus()` is triggered, the above judgment will be invalidated, and this judgment will be used
+  // Fixed: The pop-up window is not closed due to the mixing of business components
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    document.addEventListener('pointerdown', handleDocOut);
+    return function () {
+      document.removeEventListener('pointerdown', handleDocOut);
+    };
+  }, [orginalData]); // // Avoid the issue that `setOptionsData(orginalData)` sets the original value to empty on the first entry
+
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, label ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "custom-select__label"
   }, typeof label === 'string' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("label", {
@@ -5240,7 +5281,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       'reverse': isOpen
     }),
     style: {
-      display: fetchTrigger ? 'none' : 'inline-block'
+      display: MANUAL_REQ ? 'none' : 'inline-block'
     }
   }, controlArrow ? controlArrow : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
     width: "10px",
@@ -5258,7 +5299,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     transform: "translate(56.000000, 160.000000)"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("path", {
     d: "M144,6525.39 L142.594,6524 L133.987,6532.261 L133.069,6531.38 L133.074,6531.385 L125.427,6524.045 L124,6525.414 C126.113,6527.443 132.014,6533.107 133.987,6535 C135.453,6533.594 134.024,6534.965 144,6525.39"
-  })))))), fetchTrigger ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+  })))))), MANUAL_REQ ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: "custom-select-multi__control-searchbtn"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("button", {
     tabIndex: -1,
@@ -5300,7 +5341,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     className: "custom-select-multi__list"
   }, typeof multiSelectSelectedItemOnlyStatus !== 'undefined' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("li", {
     className: "custom-select-multi__list-item-statusstring"
-  }, typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && controlArr.labels.length > 0 && controlArr.labels.length < optionsData.length ? multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null, typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && controlArr.labels.length === 0 ? multiSelectSelectedItemOnlyStatus.noneLabel : null, controlArr.labels.length > 0 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof multiSelectSelectedItemOnlyStatus.allItemsLabel === 'string' && controlArr.labels.length === optionsData.length ? multiSelectSelectedItemOnlyStatus.allItemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null) : null, typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && controlArr.labels.length > 0 ? MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null, typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && controlArr.labels.length === 0 ? MULTI_SEL_SELECTED_STATUS.noneLabel : null, controlArr.labels.length > 0 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof multiSelectSelectedItemOnlyStatus.allItemsLabel !== 'string' && controlArr.labels.length === optionsData.length ? MULTI_SEL_SELECTED_STATUS.allItemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null) : null)) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof renderSelectedValue === 'function' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, renderSelectedValue(controlArr, handleMultiControlItemRemove)) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, controlArr.labels.map(function (item, index) {
+  }, MANUAL_REQ ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && controlArr.labels.length > 0 ? multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null, typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && controlArr.labels.length === 0 ? multiSelectSelectedItemOnlyStatus.noneLabel : null, typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && controlArr.labels.length > 0 ? MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null, typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && controlArr.labels.length === 0 ? MULTI_SEL_SELECTED_STATUS.noneLabel : null) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && controlArr.labels.length > 0 && controlArr.labels.length < optionsData.length ? multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null, typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && controlArr.labels.length === 0 ? multiSelectSelectedItemOnlyStatus.noneLabel : null, controlArr.labels.length > 0 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof multiSelectSelectedItemOnlyStatus.allItemsLabel === 'string' && controlArr.labels.length === optionsData.length ? multiSelectSelectedItemOnlyStatus.allItemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null) : null, typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && controlArr.labels.length > 0 ? MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null, typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && controlArr.labels.length === 0 ? MULTI_SEL_SELECTED_STATUS.noneLabel : null, controlArr.labels.length > 0 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof multiSelectSelectedItemOnlyStatus.allItemsLabel !== 'string' && controlArr.labels.length === optionsData.length ? MULTI_SEL_SELECTED_STATUS.allItemsLabel.replace('{num}', "".concat(controlArr.labels.length)) : null) : null))) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof renderSelectedValue === 'function' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, renderSelectedValue(controlArr, handleMultiControlItemRemove)) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, controlArr.labels.map(function (item, index) {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("li", {
       key: 'selected-item-' + index,
       "data-value": controlArr.values[index],
@@ -5363,7 +5404,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       'reverse': isOpen
     }),
     style: {
-      display: fetchTrigger ? 'none' : 'inline-block'
+      display: MANUAL_REQ ? 'none' : 'inline-block'
     }
   }, controlArrow ? controlArrow : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
     width: "10px",
@@ -5381,7 +5422,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     transform: "translate(56.000000, 160.000000)"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("path", {
     d: "M144,6525.39 L142.594,6524 L133.987,6532.261 L133.069,6531.38 L133.074,6531.385 L125.427,6524.045 L124,6525.414 C126.113,6527.443 132.014,6533.107 133.987,6535 C135.453,6533.594 134.024,6534.965 144,6525.39"
-  })))))), fetchTrigger ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+  })))))), MANUAL_REQ ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: "custom-select-multi__control-searchbtn"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("button", {
     tabIndex: -1,

package/lib/esm/Select/index.tsx

@@ -49,7 +49,6 @@ import {
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
-
 export type SelectOptionChangeFnType = (arg1: any, arg2: any, arg3: any) => void;
 
 export interface MultiSelectDataConfig {
@@ -214,8 +213,8 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
     const DEPTH = depth || 1055;  // the default value same as bootstrap
-    const LIVE_SEARCH_OK = typeof fetchTrigger !== 'undefined' && fetchTrigger === true ? true : false;
-    const LIVE_SEARCH_DISABLED = (typeof fetchTrigger === 'undefined' || fetchTrigger === false) && typeof window !== 'undefined' && typeof (window as any)['funda-ui__Select-disable-livesearch'] !== 'undefined' ? true : false; // Globally disable real-time search functionality (only valid for non-dynamic requests)
+    const MANUAL_REQ = typeof fetchTrigger !== 'undefined' && fetchTrigger === true ? true : false;  // Manual requests
+    const LIVE_SEARCH_DISABLED = !MANUAL_REQ && typeof window !== 'undefined' && typeof (window as any)['funda-ui__Select-disable-livesearch'] !== 'undefined' ? true : false; // Globally disable real-time search functionality (only valid for non-dynamic requests)
 
     
     const FIRST_REQUEST_AUTO = typeof firstRequestAutoExec === 'undefined' ? true : firstRequestAutoExec;
@@ -414,7 +413,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     //performance
     const handleChangeFetchSafe = useDebounce((val: any) => {
 
-
         let _orginalData: OptionConfig[] = [];
         const update = (inputData: any) => {
             const filterRes = () => {
@@ -533,7 +531,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             let filterRes: any = [];
 
 
-            if (fetchTrigger) {
+            if (MANUAL_REQ) {
 
                 // If a manual action is used to trigger the request
                 if (typeof fetchTriggerForDefaultData !== 'undefined' && fetchTriggerForDefaultData !== null && typeof fetchTriggerForDefaultData?.values[0] !== 'undefined') {
@@ -1131,7 +1129,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         if (!MULTI_SEL_VALID) popwinPosHide();
 
 
-        if (LIVE_SEARCH_OK) {
+        if (MANUAL_REQ) {
             // clean data
             setOptionsData([]);
         } else {
@@ -1173,6 +1171,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         setIsOpen(true);
 
 
+
         // pop win initalization
         setTimeout(() => {
             popwinPosInit();
@@ -1189,7 +1188,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
 
-        if (LIVE_SEARCH_OK) {
+        if (MANUAL_REQ) {
             // clean data
             setOptionsData([]);
         } else {
@@ -1198,6 +1197,11 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         }
 
 
+        // When you select multiple times, it automatically focuses on the search input box
+        if (MULTI_SEL_VALID) {
+            selectInputRef.current.select();
+        }
+
         // update temporary value
         setControlTempValue('');
 
@@ -1211,6 +1215,12 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
     }
+    
+
+    function fixFocusStatus() {
+        // When selecting multiple times, in order to avoid losing 
+        if (MULTI_SEL_VALID) handleFocus(selectInputRef.current);
+    }
 
     async function handleSelect(el: any, dataInput: any = false, valueArr: any[] = [], labelArr: any[] = []) {
 
@@ -1546,7 +1556,8 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             }
         }
 
-            
+        // Fixed an out-of-focus issue
+        fixFocusStatus();
 
     }
 
@@ -1656,6 +1667,9 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             multipleSelectionCallback(_values, _labels)
         );
 
+        // Fixed an out-of-focus issue
+        fixFocusStatus();
+
 
     }
 
@@ -1757,7 +1771,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
     async function handleFirstFetch(inputVal: any = null) {
         const _oparams: any[] = fetchFuncMethodParams || [];
-        const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : (fetchTrigger ? '------' : ''));
+        const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : (MANUAL_REQ ? '------' : ''));
         const res = await fetchData((_params).join(','), finalRes(inputVal), inputVal);
 
         return res;
@@ -1787,6 +1801,9 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         //
         handleChangeFetchSafe(val);
 
+        // Fixed an out-of-focus issue
+        fixFocusStatus();
+        
 
     }
 
@@ -1798,8 +1815,10 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         // update temporary value
         setControlTempValue('');
 
+
         //
-        onFocus?.(event);
+        onFocus?.(selectInputRef.current);
+        
     }
 
     function handleBlur(event: any) {
@@ -1820,7 +1839,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
         setTimeout(() => {
-            onBlur?.(event);
+            onBlur?.(selectInputRef.current);
         }, 300);
     }
 
@@ -1957,6 +1976,19 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
     }
 
+    function handleDocOut(e: any) {
+
+        if (e.target.closest('.custom-select__options-wrapper') === null && e.target.closest('.custom-select__wrapper') === null) {
+            // cancel
+            cancel();
+            if (MULTI_SEL_VALID) popwinPosHide();
+
+            //
+            handleBlur(null);
+        }
+    }
+
+
     useEffect(() => {
 
 
@@ -2007,6 +2039,20 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     }, []);
 
 
+
+    // Fixed an out-of-focus issue
+    //--------------
+    // !!! TIPS:
+    // Fixed: When `fixFocusStatus()` is triggered, the above judgment will be invalidated, and this judgment will be used
+    // Fixed: The pop-up window is not closed due to the mixing of business components
+    useEffect(() => {
+        document.addEventListener('pointerdown', handleDocOut);
+        return () => {
+            document.removeEventListener('pointerdown', handleDocOut);
+        };
+    }, [orginalData]); // Avoid the issue that `setOptionsData(orginalData)` sets the original value to empty on the first entry
+
+
     return (
         <>
 
@@ -2161,7 +2207,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                         {
                             'reverse': isOpen
                         }
-                    )} style={{display: fetchTrigger ? 'none' : 'inline-block' }}>
+                    )} style={{display: MANUAL_REQ ? 'none' : 'inline-block' }}>
                         {controlArrow ? controlArrow : <svg width="10px" height="10px" viewBox="0 -4.5 20 20">
                             <g stroke="none" strokeWidth="1" fill="none">
                                 <g transform="translate(-180.000000, -6684.000000)" className="arrow-fill-g" fill="#a5a5a5">
@@ -2180,7 +2226,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
                     {/* SEARCH BUTTON */}
-                    {fetchTrigger ? <>
+                    {MANUAL_REQ ? <>
                         <span className="custom-select-multi__control-searchbtn">
                             <button tabIndex={-1} type="button" className="btn border-end-0 rounded-pill" onClick={(e: React.MouseEvent) => {
                                 handleFetch().then((response: any) => {
@@ -2223,25 +2269,113 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                                 {typeof multiSelectSelectedItemOnlyStatus !== 'undefined' ? <>
 
                                     <li className="custom-select-multi__list-item-statusstring" >
-                             
-                                        {typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && controlArr.labels.length > 0 && controlArr.labels.length < optionsData.length ? multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', `${controlArr.labels.length}`) : null}
-                                        {typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && controlArr.labels.length === 0 ? multiSelectSelectedItemOnlyStatus.noneLabel : null}
+                
+                                        
+                                        {MANUAL_REQ ? <>
+                                            {/* ===================== Manual requests ===================== */}
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && 
+                                                controlArr.labels.length > 0
+                                                ? 
+                                                multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                : 
+                                                null
+                                            }
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && 
+                                                controlArr.labels.length === 0 
+                                                ? 
+                                                multiSelectSelectedItemOnlyStatus.noneLabel 
+                                                : 
+                                                null
+                                            }
+
+                                            {/*-- DEFAULT VALUE ---*/}
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && 
+                                                controlArr.labels.length > 0 
+                                                ? 
+                                                MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                : 
+                                                null
+                                            }
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && 
+                                                controlArr.labels.length === 0 
+                                                ? 
+                                                MULTI_SEL_SELECTED_STATUS.noneLabel 
+                                                : 
+                                                null
+                                            }
+
+                                            {/* ===================== /Manual requests ===================== */}
 
-                                        {/* all */}
-                                        {controlArr.labels.length > 0 ? <>
-                                            {typeof multiSelectSelectedItemOnlyStatus.allItemsLabel === 'string' && controlArr.labels.length === optionsData.length ? multiSelectSelectedItemOnlyStatus.allItemsLabel.replace('{num}', `${controlArr.labels.length}`) : null}
-                                        </>: null}
+                                        </> : <>
+                                            {/* ===================== Auto requests ===================== */}
 
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && 
+                                                controlArr.labels.length > 0 && 
+                                                controlArr.labels.length < optionsData.length 
+                                                ? 
+                                                multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                : 
+                                                null
+                                            }
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && 
+                                                controlArr.labels.length === 0 
+                                                ? 
+                                                multiSelectSelectedItemOnlyStatus.noneLabel 
+                                                : 
+                                                null
+                                            }
 
-                                        {/*-----*/}
-                                        {typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && controlArr.labels.length > 0 ? MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', `${controlArr.labels.length}`) : null}
-                                        {typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && controlArr.labels.length === 0 ? MULTI_SEL_SELECTED_STATUS.noneLabel : null}
+                                            {/* all */}
+                                            {controlArr.labels.length > 0 ? <>
+                                                {
+                                                    typeof multiSelectSelectedItemOnlyStatus.allItemsLabel === 'string' && 
+                                                    controlArr.labels.length === optionsData.length 
+                                                    ? 
+                                                    multiSelectSelectedItemOnlyStatus.allItemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                    : 
+                                                    null
+                                                }
+                                            </>: null}
 
-                                        {/* all */}
-                                        {controlArr.labels.length > 0 ? <>
-                                            {typeof multiSelectSelectedItemOnlyStatus.allItemsLabel !== 'string' && controlArr.labels.length === optionsData.length ? MULTI_SEL_SELECTED_STATUS.allItemsLabel.replace('{num}', `${controlArr.labels.length}`) : null}
-                                        </>: null}
 
+                                            {/*-- DEFAULT VALUE ---*/}
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && 
+                                                controlArr.labels.length > 0 
+                                                ? 
+                                                MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                : 
+                                                null
+                                            }
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && 
+                                                controlArr.labels.length === 0 
+                                                ? 
+                                                MULTI_SEL_SELECTED_STATUS.noneLabel 
+                                                : 
+                                                null
+                                            }
+
+                                            {/* all */}
+                                            {controlArr.labels.length > 0 ? <>
+                                                {
+                                                    typeof multiSelectSelectedItemOnlyStatus.allItemsLabel !== 'string' && 
+                                                    controlArr.labels.length === optionsData.length 
+                                                    ? 
+                                                    MULTI_SEL_SELECTED_STATUS.allItemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                    : 
+                                                    null
+                                                }
+                                            </>: null}
+                                            {/* ===================== /Auto requests ===================== */}
+
+                                        </>}
 
                                     </li>
                                 </> : <>
@@ -2340,7 +2474,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                         {
                             'reverse': isOpen
                         }
-                    )} style={{display: fetchTrigger ? 'none' : 'inline-block' }}>
+                    )} style={{display: MANUAL_REQ ? 'none' : 'inline-block' }}>
                         {controlArrow ? controlArrow : <svg width="10px" height="10px" viewBox="0 -4.5 20 20">
                             <g stroke="none" strokeWidth="1" fill="none">
                                 <g transform="translate(-180.000000, -6684.000000)" className="arrow-fill-g" fill="#a5a5a5">
@@ -2357,7 +2491,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
                     {/* SEARCH BUTTON */}
-                    {fetchTrigger ? <>
+                    {MANUAL_REQ ? <>
                         <span className="custom-select-multi__control-searchbtn">
                             <button tabIndex={-1} type="button" className="btn border-end-0 rounded-pill" onClick={(e: React.MouseEvent) => {
                                 handleFetch().then((response: any) => {

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.3.555",
+  "version": "4.3.721",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",