@descope/web-components-ui 1.0.256 → 1.0.257

package/dist/cjs/index.cjs.js

@@ -9039,7 +9039,7 @@ const multiSelectComboBoxMixin = (superclass) =>
       }
     }
 
-    get allowCustomValue() {
+    get allowCustomValues() {
       return this.getAttribute('allow-custom-value') === 'true';
     }
 
@@ -9178,7 +9178,7 @@ const multiSelectComboBoxMixin = (superclass) =>
     }
 
     #handleCustomValues() {
-      if (this.allowCustomValue) {
+      if (this.allowCustomValues) {
         this.baseElement.addEventListener('custom-value-set', (e) => {
           const newItemHtml = this.#renderItem({
             label: e.detail,
@@ -9286,6 +9286,33 @@ const multiSelectComboBoxMixin = (superclass) =>
         const selectedChildren = this.baseElement.items?.filter((item) =>
           vals.includes(item['data-id'])
         );
+
+        // If the component allows custom values, we need to add the values that are not present in the children
+        if (this.allowCustomValues) {
+          const existingValues =
+            selectedChildren?.map((child) => child.getAttribute('data-id')) || [];
+          const missingValues = vals.filter((val) => !existingValues.includes(val));
+
+          if (missingValues.length) {
+            const newItemsHtml = missingValues.reduce((acc, val) => {
+              const newItemHtml = this.#renderItem({
+                label: val,
+                displayName: val,
+                value: val,
+              });
+              return acc + newItemHtml;
+            }, '');
+            this.innerHTML += newItemsHtml;
+
+            // The value needs to be set with a timeout because it needs to execute after
+            // the custom values are added to the items by the children change observer
+            setTimeout(() => {
+              this.value = vals;
+            }, 0);
+            return;
+          }
+        }
+
         const newSelectedValues =
           selectedChildren?.map((child) => child.getAttribute('data-id')) || [];
         if (!compareArraysUnordered(this.#value, newSelectedValues)) {