progress

Author: bendera

src/includes/vscode-select/OptionListController.ts

@@ -63,6 +63,10 @@ export class OptionListController implements ReactiveController {
   }
 
   set selectedIndex(index: number) {
+    if (this._selectedIndex !== -1) {
+      this._options[this._selectedIndex].selected ??= false;
+    }
+
     const op = this.getOptionByIndex(index);
 
     this._selectedIndex = op ? index : -1;
@@ -74,7 +78,18 @@ export class OptionListController implements ReactiveController {
   }
 
   set selectedIndexes(value: number[]) {
+    this._selectedIndexes.forEach((v) => {
+      this._options[v].selected = false;
+    });
+
     this._selectedIndexes = new Set(value);
+
+    value.forEach((v) => {
+      if (this._options[v] !== undefined) {
+        this._options[v].selected = true;
+      }
+    });
+
     this._host.requestUpdate();
   }
 
@@ -240,6 +255,18 @@ export class OptionListController implements ReactiveController {
     }
   }
 
+  expandMultiSelection(values: string[]) {
+    values.forEach((v) => {
+      const foundIndex = this._indexByValue.get(v) ?? -1;
+
+      if (foundIndex !== -1) {
+        this._selectedIndexes.add(foundIndex);
+      }
+    });
+
+    this._host.requestUpdate();
+  }
+
   toggleComboboxMode(enabled: boolean) {
     this._combobox = enabled;
     this._host.requestUpdate();
@@ -265,6 +292,8 @@ export class OptionListController implements ReactiveController {
     } else {
       this._selectedIndexes.add(optIndex);
     }
+
+    this._host.requestUpdate();
   }
 
   getActiveOption(): InternalOption | null {
@@ -279,6 +308,10 @@ export class OptionListController implements ReactiveController {
     return this._options[index] ?? null;
   }
 
+  findOptionIndex(value: string) {
+    return this._indexByValue.get(value) ?? -1;
+  }
+
   getOptionByValue(
     value: string,
     includeHiddenOptions = false

src/vscode-multi-select/vscode-multi-select.ts

@@ -242,26 +242,10 @@ export class VscodeMultiSelect
     super._onSlotChange();
 
     if (this._requestedValueToSetLater.length > 0) {
-      console.log('aa', this._opts.value, this._requestedValueToSetLater);
-
-      const prevValue = this._opts.value as string[];
-
-      this._opts.value = [
-        ...this._opts.value,
-        ...this._requestedValueToSetLater,
-      ];
-
-      console.log(this._opts.value);
-
-      /* this.options.forEach((o, i) => {
-        if (this._requestedValueToSetLater.includes(o.value)) {
-          this._selectedIndexes.push(i);
-          this._values.push(o.value);
-          this._options[i].selected = true;
-          this._requestedValueToSetLater =
-            this._requestedValueToSetLater.filter((v) => v !== o.value);
-        }
-      }); */
+      this._opts.expandMultiSelection(this._requestedValueToSetLater);
+      this._requestedValueToSetLater = this._requestedValueToSetLater.filter(
+        (v) => this._opts.findOptionIndex(v) === -1
+      );
     }
   }
 
@@ -339,7 +323,7 @@ export class VscodeMultiSelect
 
   //#region render functions
   private _renderLabel() {
-    switch (this._selectedIndexes.length) {
+    switch (this._opts.selectedIndexes.length) {
       case 0:
         return html`<span class="select-face-badge no-item"
           >No items selected</span
@@ -348,7 +332,7 @@ export class VscodeMultiSelect
         return html`<span class="select-face-badge">1 item selected</span>`;
       default:
         return html`<span class="select-face-badge"
-          >${this._selectedIndexes.length} items selected</span
+          >${this._opts.selectedIndexes.length} items selected</span
         >`;
     }
   }