@xqmsg/ui-core 0.16.2 → 0.16.4

package/dist/ui-core.cjs.development.js

@@ -907,37 +907,41 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   var scrollRef = React.useRef(null);
   var inputRef = React.useRef(null);
 
-  var _useState = React.useState([]),
-      localValues = _useState[0],
-      setLocalValues = _useState[1];
+  var _useState = React.useState(false),
+      isInit = _useState[0],
+      setIsInit = _useState[1];
 
-  var _useState2 = React.useState(options),
-      localOptions = _useState2[0],
-      setLocalOptions = _useState2[1];
+  var _useState2 = React.useState([]),
+      localValues = _useState2[0],
+      setLocalValues = _useState2[1];
 
-  var _useState3 = React.useState(false),
-      isFocussed = _useState3[0],
-      setIsFocussed = _useState3[1];
+  var _useState3 = React.useState(options),
+      localOptions = _useState3[0],
+      setLocalOptions = _useState3[1];
 
   var _useState4 = React.useState(false),
-      shouldSideScroll = _useState4[0],
-      setShouldSideScroll = _useState4[1];
+      isFocussed = _useState4[0],
+      setIsFocussed = _useState4[1];
 
-  var _useState5 = React.useState(null),
-      optionIndex = _useState5[0],
-      setOptionIndex = _useState5[1];
+  var _useState5 = React.useState(false),
+      shouldSideScroll = _useState5[0],
+      setShouldSideScroll = _useState5[1];
 
-  var _useState6 = React.useState('top'),
-      position = _useState6[0],
-      setPosition = _useState6[1];
+  var _useState6 = React.useState(null),
+      optionIndex = _useState6[0],
+      setOptionIndex = _useState6[1];
 
-  var _useState7 = React.useState(''),
-      searchValue = _useState7[0],
-      setSearchValue = _useState7[1];
+  var _useState7 = React.useState('top'),
+      position = _useState7[0],
+      setPosition = _useState7[1];
 
   var _useState8 = React.useState(''),
-      debouncedSearchValue = _useState8[0],
-      setDebouncedSearchValue = _useState8[1];
+      searchValue = _useState8[0],
+      setSearchValue = _useState8[1];
+
+  var _useState9 = React.useState(''),
+      debouncedSearchValue = _useState9[0],
+      setDebouncedSearchValue = _useState9[1];
 
   console.log({
     searchValue: searchValue,
@@ -958,6 +962,7 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   React.useEffect(function () {
     if (watchedValue !== undefined && !watchedValue.length) {
       setLocalValues([]);
+      setIsInit(true);
     }
 
     if (watchedValue !== undefined && watchedValue != null && watchedValue.length) {
@@ -971,13 +976,25 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
         setShouldSideScroll(false);
       }
 
+      if (isInit) return;
       setLocalValues(watchedValue.split(',').filter(Boolean).map(function (value) {
         return options.find(function (option) {
           return option.value === value;
         });
-      }));
+      })); // Filter out options that are already selected
+
+      setLocalOptions(function (prevLocalOptions) {
+        return prevLocalOptions.filter(function (localOption) {
+          return !watchedValue.split(',').filter(Boolean).map(function (value) {
+            return options.find(function (option) {
+              return option.value === value;
+            });
+          }).includes(localOption);
+        });
+      });
+      setIsInit(true);
     }
-  }, [options, shouldSideScroll, watchedValue]);
+  }, [isInit, localOptions, localValues, options, shouldSideScroll, watchedValue]);
 
   var handleChange = function handleChange(option) {
     setShouldSideScroll(true);