karsten-design-system 1.1.84 → 1.1.86

package/dist/index.js

@@ -711,11 +711,41 @@ function MultiSelect(props) {
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     const containerRef = useRef(null);
     const inputRef = useRef(null);
+    const hasOnInputChange = props?.onInputChange !== undefined;
     const normalize = (str) => str
         .normalize('NFD')
         .replace(/[\u0300-\u036f]/g, '')
         .toLowerCase();
-    const filteredOptions = options.filter((option) => normalize(option.label).includes(normalize(searchText)));
+    const ensureValuesInOptions = (optionsList, currentValues) => {
+        if (!currentValues || currentValues.length === 0)
+            return optionsList;
+        const allOptions = [...optionsList];
+        currentValues.forEach((selected) => {
+            const exists = allOptions.some((opt) => opt.value === selected.value);
+            if (!exists) {
+                allOptions.unshift(selected);
+            }
+        });
+        return allOptions;
+    };
+    const filteredOptions = (() => {
+        const allOptions = ensureValuesInOptions(options, props.value);
+        // if (!isReadOnly) {
+        //   return allOptions.filter((option) =>
+        //     normalize(option.label).includes(normalize(searchText))
+        //   )
+        // }
+        if (!isReadOnly) {
+            const filtered = allOptions.filter((option) => normalize(option.label).includes(normalize(searchText)));
+            const selected = Array.isArray(props.value) ? props.value : [];
+            const selectedNotInFiltered = selected.filter((sel) => !filtered.find((opt) => opt.value === sel.value));
+            return [...selectedNotInFiltered, ...filtered];
+        }
+        if (hasOnInputChange) {
+            return allOptions;
+        }
+        return allOptions;
+    })();
     const toggleDropdown = () => {
         if (!disabled && !isLoading) {
             const newState = !isOpen;