funda-ui 4.7.161 → 4.7.163

package/Select/index.js

@@ -3913,6 +3913,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     _useState26 = _slicedToArray(_useState25, 2),
     controlArr = _useState26[0],
     setControlArr = _useState26[1];
+  function chkValueExist(v) {
+    return typeof v !== 'undefined' && v !== '';
+  }
   var listContainerHeightLimit = function listContainerHeightLimit(num) {
     var res = num;
     if (res > LIST_CONTAINER_MAX_HEIGHT) res = LIST_CONTAINER_MAX_HEIGHT;
@@ -4110,11 +4113,15 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         filterResQueryValue,
         filterResQueryLabel,
         _currentData,
+        _tempLabels,
+        _tempValues,
         _values,
-        _filterRes3,
+        _filterRes2,
         _filterResQueryValue,
         _filterResQueryLabel,
         _currentData2,
+        _tempLabels2,
+        _tempValues2,
         _values3,
         _args = arguments;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -4187,7 +4194,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             // ++++++++++++++++++++
             // Single selection
             // ++++++++++++++++++++
-            if (typeof defaultValue === 'undefined' || defaultValue === '') {
+            if (!chkValueExist(defaultValue)) {
               // Do not use `init`, otherwise the query will revert to the default value if there is no value
               setControlValue('');
               setControlLabel('');
@@ -4202,42 +4209,34 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             // Multiple selection
             // ++++++++++++++++++++
             if (MULTI_SEL_VALID) {
-              if ((typeof defaultValue === 'undefined' || defaultValue === '') && init) {
+              if (!chkValueExist(defaultValue) && init) {
                 setControlArr({
                   labels: [],
                   values: []
                 });
               }
-              if (typeof defaultValue !== 'undefined' && defaultValue !== '' && (multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data) !== null) {
+              if (chkValueExist(defaultValue) && (multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data) !== null) {
                 // initialize default values of Multiple selection
                 _currentData = multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data;
-                setControlArr({
-                  labels: _currentData.labels,
-                  values: _currentData.values
-                });
-
-                //
+                _tempLabels = _toConsumableArray(_currentData.labels);
+                _tempValues = _toConsumableArray(_currentData.values);
                 _values = VALUE_BY_BRACKETS ? (0,extract.extractContentsOfBrackets)(defaultValue) : defaultValue.split(',');
                 _values.forEach(function (_value, _index) {
                   if (!multiSelControlOptionExist(_currentData.values, _value) && typeof _currentData.values[_index] !== 'undefined') {
-                    var _filterRes2 = [];
-                    _filterRes2 = [{
-                      value: _currentData.values[_index],
-                      label: _currentData.labels[_index],
-                      queryString: _currentData.queryStrings[_index]
-                    }];
-                    setControlArr(function (prevState) {
-                      return {
-                        labels: unique([].concat(_toConsumableArray(prevState.labels), [typeof _filterRes2[0] !== 'undefined' ? _filterRes2[0].label : '']).filter(function (v) {
-                          return v !== '';
-                        })),
-                        values: unique([].concat(_toConsumableArray(prevState.values), [typeof _filterRes2[0] !== 'undefined' ? _filterRes2[0].value : '']).filter(function (v) {
-                          return v !== '';
-                        }))
-                      };
-                    });
+                    _tempLabels.push(_currentData.labels[_index]);
+                    _tempValues.push(_currentData.values[_index]);
                   }
                 });
+                _tempLabels = unique(_tempLabels.filter(function (v) {
+                  return v !== '';
+                }));
+                _tempValues = unique(_tempValues.filter(function (v) {
+                  return v !== '';
+                }));
+                setControlArr({
+                  labels: _tempLabels,
+                  values: _tempValues
+                });
               }
 
               // Appropriate multi-item container height
@@ -4283,33 +4282,33 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             // value & label must be initialized
 
             // If the default value is label, match value
-            _filterRes3 = [];
+            _filterRes2 = [];
             _filterResQueryValue = staticOptionsData.filter(function (item) {
               return item.value == defaultValue;
             });
             _filterResQueryLabel = staticOptionsData.filter(function (item) {
               return item.label == defaultValue;
             });
-            _filterRes3 = _filterResQueryValue;
-            if (_filterResQueryValue.length === 0) _filterRes3 = _filterResQueryLabel;
+            _filterRes2 = _filterResQueryValue;
+            if (_filterResQueryValue.length === 0) _filterRes2 = _filterResQueryLabel;
 
             // if the default value is Object
-            if (isObject(inputDefault) && _filterRes3.length === 0) {
-              _filterRes3 = [inputDefault];
+            if (isObject(inputDefault) && _filterRes2.length === 0) {
+              _filterRes2 = [inputDefault];
             }
 
             // STEP 4: ===========
             // ++++++++++++++++++++
             // Single selection
             // ++++++++++++++++++++
-            if (typeof defaultValue === 'undefined' || defaultValue === '') {
+            if (!chkValueExist(defaultValue)) {
               // Do not use `init`, otherwise the query will revert to the default value if there is no value
               setControlValue('');
               setControlLabel('');
             } else {
-              if (_filterRes3.length > 0) {
-                setControlValue(_filterRes3[0].value);
-                setControlLabel(formatIndentVal(_filterRes3[0].label, INDENT_LAST_PLACEHOLDER));
+              if (_filterRes2.length > 0) {
+                setControlValue(_filterRes2[0].value);
+                setControlLabel(formatIndentVal(_filterRes2[0].label, INDENT_LAST_PLACEHOLDER));
               }
             }
 
@@ -4317,42 +4316,34 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             // Multiple selection
             // ++++++++++++++++++++
             if (MULTI_SEL_VALID) {
-              if ((typeof defaultValue === 'undefined' || defaultValue === '') && init) {
+              if (!chkValueExist(defaultValue) && init) {
                 setControlArr({
                   labels: [],
                   values: []
                 });
               }
-              if (typeof defaultValue !== 'undefined' && defaultValue !== '' && (multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data) !== null) {
+              if (chkValueExist(defaultValue) && (multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data) !== null) {
                 // initialize default values of Multiple selection
                 _currentData2 = multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data;
-                setControlArr({
-                  labels: _currentData2.labels,
-                  values: _currentData2.values
-                });
-
-                //
-                _values3 = typeof defaultValue !== 'undefined' ? VALUE_BY_BRACKETS ? (0,extract.extractContentsOfBrackets)(defaultValue) : defaultValue.split(',') : [];
+                _tempLabels2 = _toConsumableArray(_currentData2.labels);
+                _tempValues2 = _toConsumableArray(_currentData2.values);
+                _values3 = VALUE_BY_BRACKETS ? (0,extract.extractContentsOfBrackets)(defaultValue) : defaultValue.split(',');
                 _values3.forEach(function (_value, _index) {
                   if (!multiSelControlOptionExist(_currentData2.values, _value) && typeof _currentData2.values[_index] !== 'undefined') {
-                    var _filterRes4 = [];
-                    _filterRes4 = [{
-                      value: _currentData2.values[_index],
-                      label: _currentData2.labels[_index],
-                      queryString: _currentData2.queryStrings[_index]
-                    }];
-                    setControlArr(function (prevState) {
-                      return {
-                        labels: unique([].concat(_toConsumableArray(prevState.labels), [typeof _filterRes4[0] !== 'undefined' ? _filterRes4[0].label : '']).filter(function (v) {
-                          return v !== '';
-                        })),
-                        values: unique([].concat(_toConsumableArray(prevState.values), [typeof _filterRes4[0] !== 'undefined' ? _filterRes4[0].value : '']).filter(function (v) {
-                          return v !== '';
-                        }))
-                      };
-                    });
+                    _tempLabels2.push(_currentData2.labels[_index]);
+                    _tempValues2.push(_currentData2.values[_index]);
                   }
                 });
+                _tempLabels2 = unique(_tempLabels2.filter(function (v) {
+                  return v !== '';
+                }));
+                _tempValues2 = unique(_tempValues2.filter(function (v) {
+                  return v !== '';
+                }));
+                setControlArr({
+                  labels: _tempLabels2,
+                  values: _tempValues2
+                });
               }
 
               // Appropriate multi-item container height
@@ -5248,25 +5239,18 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
             inputVal = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : null;
-            if (!MANUAL_REQ) {
-              _context4.next = 3;
-              break;
-            }
-            return _context4.abrupt("return", []);
-          case 3:
-            //
             _oparams = fetchFuncMethodParams || [];
             _params = _oparams.map(function (item) {
               return item !== '$QUERY_STRING' ? item : MANUAL_REQ ? QUERY_STRING_PLACEHOLDER : '';
             });
-            _context4.next = 7;
+            _context4.next = 5;
             return fetchData(_params.join(','), finalRes(inputVal), inputVal);
-          case 7:
+          case 5:
             res = _context4.sent;
             // Set an identifier indicating that the first request has been completed
             if (!handleFirstFetchCompleted) setHandleFirstFetchCompleted(true);
             return _context4.abrupt("return", res);
-          case 10:
+          case 8:
           case "end":
             return _context4.stop();
         }
@@ -5491,13 +5475,43 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     //--------------
     if (FIRST_REQUEST_AUTO) {
       handleFirstFetch(value);
+    } else {
+      if (MULTI_SEL_VALID) {
+        // Appropriate multi-item container height
+        setTimeout(function () {
+          adjustMultiControlContainerHeight();
+        }, 0);
+      }
     }
 
     // Forced assignment does not depend on "fetch" or "firstRequestAutoExe"
     // Don't use "value.value && value.label" directly, if it is empty, it will be treated as FALSE
-    if (value && _typeof(value) === 'object') {
-      if (typeof value.value !== 'undefined' && value.value !== null) setControlValue(value.value);
-      if (typeof value.label !== 'undefined' && value.label !== null) setControlLabel(formatIndentVal(value.label, INDENT_LAST_PLACEHOLDER));
+    if (chkValueExist(value)) {
+      if (_typeof(value) === 'object') {
+        // Single selection
+        if (typeof value.value !== 'undefined' && value.value !== null) setControlValue(value.value);
+        if (typeof value.label !== 'undefined' && value.label !== null) setControlLabel(formatIndentVal(value.label, INDENT_LAST_PLACEHOLDER));
+      }
+      if (_typeof(multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data) === 'object' && MULTI_SEL_VALID) {
+        // Multiple selection
+        if (chkValueExist(value) && (multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data) !== null) {
+          // initialize default values of Multiple selection
+          var _currentData = multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data;
+          setControlArr({
+            labels: _currentData.labels,
+            values: _currentData.values
+          });
+        }
+      }
+    } else {
+      if (!FIRST_REQUEST_AUTO) {
+        setControlValue('');
+        setControlLabel('');
+        setControlArr({
+          labels: [],
+          values: []
+        });
+      }
     }
 
     //
@@ -5520,6 +5534,13 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       //--------------
       if (FIRST_REQUEST_AUTO) {
         handleFirstFetch(defaultValue);
+      } else {
+        if (MULTI_SEL_VALID) {
+          // Appropriate multi-item container height
+          setTimeout(function () {
+            adjustMultiControlContainerHeight();
+          }, 0);
+        }
       }
     }
   }, []);

package/lib/cjs/Select/index.js

@@ -3913,6 +3913,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     _useState26 = _slicedToArray(_useState25, 2),
     controlArr = _useState26[0],
     setControlArr = _useState26[1];
+  function chkValueExist(v) {
+    return typeof v !== 'undefined' && v !== '';
+  }
   var listContainerHeightLimit = function listContainerHeightLimit(num) {
     var res = num;
     if (res > LIST_CONTAINER_MAX_HEIGHT) res = LIST_CONTAINER_MAX_HEIGHT;
@@ -4110,11 +4113,15 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         filterResQueryValue,
         filterResQueryLabel,
         _currentData,
+        _tempLabels,
+        _tempValues,
         _values,
-        _filterRes3,
+        _filterRes2,
         _filterResQueryValue,
         _filterResQueryLabel,
         _currentData2,
+        _tempLabels2,
+        _tempValues2,
         _values3,
         _args = arguments;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -4187,7 +4194,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             // ++++++++++++++++++++
             // Single selection
             // ++++++++++++++++++++
-            if (typeof defaultValue === 'undefined' || defaultValue === '') {
+            if (!chkValueExist(defaultValue)) {
               // Do not use `init`, otherwise the query will revert to the default value if there is no value
               setControlValue('');
               setControlLabel('');
@@ -4202,42 +4209,34 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             // Multiple selection
             // ++++++++++++++++++++
             if (MULTI_SEL_VALID) {
-              if ((typeof defaultValue === 'undefined' || defaultValue === '') && init) {
+              if (!chkValueExist(defaultValue) && init) {
                 setControlArr({
                   labels: [],
                   values: []
                 });
               }
-              if (typeof defaultValue !== 'undefined' && defaultValue !== '' && (multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data) !== null) {
+              if (chkValueExist(defaultValue) && (multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data) !== null) {
                 // initialize default values of Multiple selection
                 _currentData = multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data;
-                setControlArr({
-                  labels: _currentData.labels,
-                  values: _currentData.values
-                });
-
-                //
+                _tempLabels = _toConsumableArray(_currentData.labels);
+                _tempValues = _toConsumableArray(_currentData.values);
                 _values = VALUE_BY_BRACKETS ? (0,extract.extractContentsOfBrackets)(defaultValue) : defaultValue.split(',');
                 _values.forEach(function (_value, _index) {
                   if (!multiSelControlOptionExist(_currentData.values, _value) && typeof _currentData.values[_index] !== 'undefined') {
-                    var _filterRes2 = [];
-                    _filterRes2 = [{
-                      value: _currentData.values[_index],
-                      label: _currentData.labels[_index],
-                      queryString: _currentData.queryStrings[_index]
-                    }];
-                    setControlArr(function (prevState) {
-                      return {
-                        labels: unique([].concat(_toConsumableArray(prevState.labels), [typeof _filterRes2[0] !== 'undefined' ? _filterRes2[0].label : '']).filter(function (v) {
-                          return v !== '';
-                        })),
-                        values: unique([].concat(_toConsumableArray(prevState.values), [typeof _filterRes2[0] !== 'undefined' ? _filterRes2[0].value : '']).filter(function (v) {
-                          return v !== '';
-                        }))
-                      };
-                    });
+                    _tempLabels.push(_currentData.labels[_index]);
+                    _tempValues.push(_currentData.values[_index]);
                   }
                 });
+                _tempLabels = unique(_tempLabels.filter(function (v) {
+                  return v !== '';
+                }));
+                _tempValues = unique(_tempValues.filter(function (v) {
+                  return v !== '';
+                }));
+                setControlArr({
+                  labels: _tempLabels,
+                  values: _tempValues
+                });
               }
 
               // Appropriate multi-item container height
@@ -4283,33 +4282,33 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             // value & label must be initialized
 
             // If the default value is label, match value
-            _filterRes3 = [];
+            _filterRes2 = [];
             _filterResQueryValue = staticOptionsData.filter(function (item) {
               return item.value == defaultValue;
             });
             _filterResQueryLabel = staticOptionsData.filter(function (item) {
               return item.label == defaultValue;
             });
-            _filterRes3 = _filterResQueryValue;
-            if (_filterResQueryValue.length === 0) _filterRes3 = _filterResQueryLabel;
+            _filterRes2 = _filterResQueryValue;
+            if (_filterResQueryValue.length === 0) _filterRes2 = _filterResQueryLabel;
 
             // if the default value is Object
-            if (isObject(inputDefault) && _filterRes3.length === 0) {
-              _filterRes3 = [inputDefault];
+            if (isObject(inputDefault) && _filterRes2.length === 0) {
+              _filterRes2 = [inputDefault];
             }
 
             // STEP 4: ===========
             // ++++++++++++++++++++
             // Single selection
             // ++++++++++++++++++++
-            if (typeof defaultValue === 'undefined' || defaultValue === '') {
+            if (!chkValueExist(defaultValue)) {
               // Do not use `init`, otherwise the query will revert to the default value if there is no value
               setControlValue('');
               setControlLabel('');
             } else {
-              if (_filterRes3.length > 0) {
-                setControlValue(_filterRes3[0].value);
-                setControlLabel(formatIndentVal(_filterRes3[0].label, INDENT_LAST_PLACEHOLDER));
+              if (_filterRes2.length > 0) {
+                setControlValue(_filterRes2[0].value);
+                setControlLabel(formatIndentVal(_filterRes2[0].label, INDENT_LAST_PLACEHOLDER));
               }
             }
 
@@ -4317,42 +4316,34 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             // Multiple selection
             // ++++++++++++++++++++
             if (MULTI_SEL_VALID) {
-              if ((typeof defaultValue === 'undefined' || defaultValue === '') && init) {
+              if (!chkValueExist(defaultValue) && init) {
                 setControlArr({
                   labels: [],
                   values: []
                 });
               }
-              if (typeof defaultValue !== 'undefined' && defaultValue !== '' && (multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data) !== null) {
+              if (chkValueExist(defaultValue) && (multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data) !== null) {
                 // initialize default values of Multiple selection
                 _currentData2 = multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data;
-                setControlArr({
-                  labels: _currentData2.labels,
-                  values: _currentData2.values
-                });
-
-                //
-                _values3 = typeof defaultValue !== 'undefined' ? VALUE_BY_BRACKETS ? (0,extract.extractContentsOfBrackets)(defaultValue) : defaultValue.split(',') : [];
+                _tempLabels2 = _toConsumableArray(_currentData2.labels);
+                _tempValues2 = _toConsumableArray(_currentData2.values);
+                _values3 = VALUE_BY_BRACKETS ? (0,extract.extractContentsOfBrackets)(defaultValue) : defaultValue.split(',');
                 _values3.forEach(function (_value, _index) {
                   if (!multiSelControlOptionExist(_currentData2.values, _value) && typeof _currentData2.values[_index] !== 'undefined') {
-                    var _filterRes4 = [];
-                    _filterRes4 = [{
-                      value: _currentData2.values[_index],
-                      label: _currentData2.labels[_index],
-                      queryString: _currentData2.queryStrings[_index]
-                    }];
-                    setControlArr(function (prevState) {
-                      return {
-                        labels: unique([].concat(_toConsumableArray(prevState.labels), [typeof _filterRes4[0] !== 'undefined' ? _filterRes4[0].label : '']).filter(function (v) {
-                          return v !== '';
-                        })),
-                        values: unique([].concat(_toConsumableArray(prevState.values), [typeof _filterRes4[0] !== 'undefined' ? _filterRes4[0].value : '']).filter(function (v) {
-                          return v !== '';
-                        }))
-                      };
-                    });
+                    _tempLabels2.push(_currentData2.labels[_index]);
+                    _tempValues2.push(_currentData2.values[_index]);
                   }
                 });
+                _tempLabels2 = unique(_tempLabels2.filter(function (v) {
+                  return v !== '';
+                }));
+                _tempValues2 = unique(_tempValues2.filter(function (v) {
+                  return v !== '';
+                }));
+                setControlArr({
+                  labels: _tempLabels2,
+                  values: _tempValues2
+                });
               }
 
               // Appropriate multi-item container height
@@ -5248,25 +5239,18 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
             inputVal = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : null;
-            if (!MANUAL_REQ) {
-              _context4.next = 3;
-              break;
-            }
-            return _context4.abrupt("return", []);
-          case 3:
-            //
             _oparams = fetchFuncMethodParams || [];
             _params = _oparams.map(function (item) {
               return item !== '$QUERY_STRING' ? item : MANUAL_REQ ? QUERY_STRING_PLACEHOLDER : '';
             });
-            _context4.next = 7;
+            _context4.next = 5;
             return fetchData(_params.join(','), finalRes(inputVal), inputVal);
-          case 7:
+          case 5:
             res = _context4.sent;
             // Set an identifier indicating that the first request has been completed
             if (!handleFirstFetchCompleted) setHandleFirstFetchCompleted(true);
             return _context4.abrupt("return", res);
-          case 10:
+          case 8:
           case "end":
             return _context4.stop();
         }
@@ -5491,13 +5475,43 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     //--------------
     if (FIRST_REQUEST_AUTO) {
       handleFirstFetch(value);
+    } else {
+      if (MULTI_SEL_VALID) {
+        // Appropriate multi-item container height
+        setTimeout(function () {
+          adjustMultiControlContainerHeight();
+        }, 0);
+      }
     }
 
     // Forced assignment does not depend on "fetch" or "firstRequestAutoExe"
     // Don't use "value.value && value.label" directly, if it is empty, it will be treated as FALSE
-    if (value && _typeof(value) === 'object') {
-      if (typeof value.value !== 'undefined' && value.value !== null) setControlValue(value.value);
-      if (typeof value.label !== 'undefined' && value.label !== null) setControlLabel(formatIndentVal(value.label, INDENT_LAST_PLACEHOLDER));
+    if (chkValueExist(value)) {
+      if (_typeof(value) === 'object') {
+        // Single selection
+        if (typeof value.value !== 'undefined' && value.value !== null) setControlValue(value.value);
+        if (typeof value.label !== 'undefined' && value.label !== null) setControlLabel(formatIndentVal(value.label, INDENT_LAST_PLACEHOLDER));
+      }
+      if (_typeof(multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data) === 'object' && MULTI_SEL_VALID) {
+        // Multiple selection
+        if (chkValueExist(value) && (multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data) !== null) {
+          // initialize default values of Multiple selection
+          var _currentData = multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.data;
+          setControlArr({
+            labels: _currentData.labels,
+            values: _currentData.values
+          });
+        }
+      }
+    } else {
+      if (!FIRST_REQUEST_AUTO) {
+        setControlValue('');
+        setControlLabel('');
+        setControlArr({
+          labels: [],
+          values: []
+        });
+      }
     }
 
     //
@@ -5520,6 +5534,13 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       //--------------
       if (FIRST_REQUEST_AUTO) {
         handleFirstFetch(defaultValue);
+      } else {
+        if (MULTI_SEL_VALID) {
+          // Appropriate multi-item container height
+          setTimeout(function () {
+            adjustMultiControlContainerHeight();
+          }, 0);
+        }
       }
     }
   }, []);

package/lib/esm/Select/index.tsx

@@ -303,6 +303,11 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         values: []
     });
 
+    function chkValueExist(v: any) {
+        return typeof v !== 'undefined' && v !== '';
+    }
+
+
     const listContainerHeightLimit = (num: number) => {
         let res = num;
         if (res > LIST_CONTAINER_MAX_HEIGHT) res = LIST_CONTAINER_MAX_HEIGHT;
@@ -515,7 +520,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         // Determine whether the default value is user query input or default input
         const defaultValue = init ? valueToInputDefault : '';
 
-
         if (typeof fetchFuncAsync === 'object') {
 
 
@@ -555,7 +559,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             // value & label must be initialized
             let filterRes: any = [];
 
-
             if (MANUAL_REQ) {
 
                 // If a manual action is used to trigger the request
@@ -583,13 +586,12 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
             }
 
-    
 
             // STEP 4: ===========
             // ++++++++++++++++++++
             // Single selection
             // ++++++++++++++++++++
-            if (typeof defaultValue === 'undefined' || defaultValue === '') {  // Do not use `init`, otherwise the query will revert to the default value if there is no value
+            if (!chkValueExist(defaultValue)) {  // Do not use `init`, otherwise the query will revert to the default value if there is no value
                 setControlValue('');
                 setControlLabel('');
             } else {
@@ -607,7 +609,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             if (MULTI_SEL_VALID) {
 
 
-                if ((typeof defaultValue === 'undefined' || defaultValue === '') && init) {
+                if (!chkValueExist(defaultValue) && init) {
                     setControlArr({
                         labels: [],
                         values: []
@@ -616,42 +618,30 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
 
-                if (typeof defaultValue !== 'undefined' && defaultValue !== '' && multiSelect?.data !== null) {
+                if (chkValueExist(defaultValue) && multiSelect?.data !== null) {
 
                     // initialize default values of Multiple selection
                     const _currentData: any = multiSelect?.data;
 
-                    setControlArr({
-                        labels: _currentData.labels,
-                        values: _currentData.values,
-                    });
+                    let _tempLabels = [..._currentData.labels];
+                    let _tempValues = [..._currentData.values];
 
-                    //
                     const _values: string[] = VALUE_BY_BRACKETS ? extractContentsOfBrackets(defaultValue) : defaultValue.split(',');
 
-
                     _values.forEach((_value: string, _index: number) => {
-
                         if (!multiSelControlOptionExist(_currentData.values, _value) && typeof _currentData.values[_index] !== 'undefined') {
-
-                            let filterRes: any = [];
-                            filterRes = [{
-                                value: _currentData.values[_index],
-                                label: _currentData.labels[_index],
-                                queryString: _currentData.queryStrings[_index]
-                            }];
-
-                            setControlArr((prevState: any) => {
-                                return {
-                                    labels: unique([...prevState.labels, typeof filterRes[0] !== 'undefined' ? filterRes[0].label : ''].filter((v: any) => v !== '')),
-                                    values: unique([...prevState.values, typeof filterRes[0] !== 'undefined' ? filterRes[0].value : ''].filter((v: any) => v !== ''))
-                                }
-                            });
-
+                            _tempLabels.push(_currentData.labels[_index]);
+                            _tempValues.push(_currentData.values[_index]);
                         }
-
                     });
 
+                    _tempLabels = unique(_tempLabels.filter((v: any) => v !== ''));
+                    _tempValues = unique(_tempValues.filter((v: any) => v !== ''));
+
+                    setControlArr({
+                        labels: _tempLabels,
+                        values: _tempValues,
+                    });
 
                 }
 
@@ -727,7 +717,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             // ++++++++++++++++++++
             // Single selection
             // ++++++++++++++++++++
-            if (typeof defaultValue === 'undefined' || defaultValue === '') {  // Do not use `init`, otherwise the query will revert to the default value if there is no value
+            if (!chkValueExist(defaultValue)) {  // Do not use `init`, otherwise the query will revert to the default value if there is no value
                 setControlValue('');
                 setControlLabel('');
             } else {
@@ -746,46 +736,36 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             if (MULTI_SEL_VALID) {
 
 
-                if ((typeof defaultValue === 'undefined' || defaultValue === '') && init) {
+                if (!chkValueExist(defaultValue) && init) {
                     setControlArr({
                         labels: [],
                         values: []
                     });
                 }
 
-                if (typeof defaultValue !== 'undefined' && defaultValue !== '' && multiSelect?.data !== null) {
+                if (chkValueExist(defaultValue) && multiSelect?.data !== null) {
 
                     // initialize default values of Multiple selection
                     const _currentData: any = multiSelect?.data;
 
-                    setControlArr({
-                        labels: _currentData.labels,
-                        values: _currentData.values,
-                    });
+                    let _tempLabels = [..._currentData.labels];
+                    let _tempValues = [..._currentData.values];
 
-                    //
-                    const _values: string[] = typeof defaultValue !== 'undefined' ? (VALUE_BY_BRACKETS ? extractContentsOfBrackets(defaultValue) : defaultValue.split(',')) : [];
-                    _values.forEach((_value: string, _index: number) => {
+                    const _values: string[] = VALUE_BY_BRACKETS ? extractContentsOfBrackets(defaultValue) : defaultValue.split(',');
 
+                    _values.forEach((_value: string, _index: number) => {
                         if (!multiSelControlOptionExist(_currentData.values, _value) && typeof _currentData.values[_index] !== 'undefined') {
+                            _tempLabels.push(_currentData.labels[_index]);
+                            _tempValues.push(_currentData.values[_index]);
+                        }
+                    });
 
+                    _tempLabels = unique(_tempLabels.filter((v: any) => v !== ''));
+                    _tempValues = unique(_tempValues.filter((v: any) => v !== ''));
 
-                            let filterRes: any = [];
-                            filterRes = [{
-                                value: _currentData.values[_index],
-                                label: _currentData.labels[_index],
-                                queryString: _currentData.queryStrings[_index]
-                            }];
-
-                            setControlArr((prevState: any) => {
-                                return {
-                                    labels: unique([...prevState.labels, typeof filterRes[0] !== 'undefined' ? filterRes[0].label : ''].filter((v: any) => v !== '')),
-                                    values: unique([...prevState.values, typeof filterRes[0] !== 'undefined' ? filterRes[0].value : ''].filter((v: any) => v !== ''))
-                                }
-                            });
-
-
-                        }
+                    setControlArr({
+                        labels: _tempLabels,
+                        values: _tempValues,
                     });
                 }
 
@@ -1848,10 +1828,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
     async function handleFirstFetch(inputVal: any = null) {
 
-        // If manual requests are enabled, do not send them for the first time
-        if (MANUAL_REQ) return [];
-
-        //
         const _oparams: any[] = fetchFuncMethodParams || [];
         const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : (MANUAL_REQ ? QUERY_STRING_PLACEHOLDER : ''));
         const res = await fetchData((_params).join(','), finalRes(inputVal), inputVal);
@@ -2103,16 +2079,51 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         //--------------
         if (FIRST_REQUEST_AUTO) {
             handleFirstFetch(value);
+        } else {
+            if (MULTI_SEL_VALID) {
+                // Appropriate multi-item container height
+                setTimeout(() => {
+                    adjustMultiControlContainerHeight();
+                }, 0);
+            }
         }
 
         // Forced assignment does not depend on "fetch" or "firstRequestAutoExe"
         // Don't use "value.value && value.label" directly, if it is empty, it will be treated as FALSE
-        if ( value && typeof value === 'object' ) {
-            if (typeof value.value !== 'undefined' && value.value !== null) setControlValue(value.value as string);
-            if (typeof value.label !== 'undefined' && value.label !== null) setControlLabel(formatIndentVal(value.label, INDENT_LAST_PLACEHOLDER));
+        if (chkValueExist(value)) {
+            if (typeof value === 'object') { // Single selection
+                if (typeof value.value !== 'undefined' && value.value !== null) setControlValue(value.value as string);
+                if (typeof value.label !== 'undefined' && value.label !== null) setControlLabel(formatIndentVal(value.label, INDENT_LAST_PLACEHOLDER));
+            }
+            
+            if ( typeof multiSelect?.data === 'object' && MULTI_SEL_VALID) {  // Multiple selection
+                if (chkValueExist(value) && multiSelect?.data !== null) {
+
+                    // initialize default values of Multiple selection
+                    const _currentData: any = multiSelect?.data;
+
+                    setControlArr({
+                        labels: _currentData.labels,
+                        values: _currentData.values,
+                    });
+                }
+            }
+
+        } else {
+            if (!FIRST_REQUEST_AUTO) {
+                setControlValue('');
+                setControlLabel('');
+                setControlArr({
+                    labels: [],
+                    values: []
+                });
+            }
         }
 
 
+
+
+
         //
         //--------------
         return () => {
@@ -2137,6 +2148,13 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             //--------------
             if (FIRST_REQUEST_AUTO) {
                 handleFirstFetch(defaultValue);
+            } else {
+               if (MULTI_SEL_VALID) {
+                    // Appropriate multi-item container height
+                    setTimeout(() => {
+                        adjustMultiControlContainerHeight();
+                    }, 0);
+               }
             }
 
         }
@@ -2144,7 +2162,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     }, []);
 
 
-
     // Fixed an out-of-focus issue
     //--------------
     // !!! TIPS:

package/package.json

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