Fix preselected option shows in MultiSelect

bendera · bendera · commit fff13adbc22b · 2025-09-06T22:20:07.000+02:00
diff --git a/dev/vscode-multi-select/issue-510.html b/dev/vscode-multi-select/issue-510.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>multi combo</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    >
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+    <script>
+      const logEvents = (selector, eventType) => {
+        document.querySelector(selector).addEventListener(eventType, (ev) => {
+          console.log(ev);
+        });
+      };
+    </script>
+  </head>
+
+  <body>
+    <main>
+      <vscode-demo>
+        <vscode-multi-select label="Multi Select example">
+          <vscode-option selected>Lorem</vscode-option>
+          <vscode-option selected>Ipsum</vscode-option>
+          <vscode-option>Dolor</vscode-option>
+        </vscode-multi-select>
+      </vscode-demo>
+    </main>
+  </body>
+</html>
diff --git a/src/vscode-multi-select/vscode-multi-select.ts b/src/vscode-multi-select/vscode-multi-select.ts
@@ -321,6 +321,11 @@ export class VscodeMultiSelect
     this._setFormValue();
     this._manageRequired();
   }
+
+  protected override _onComboboxInputBlur(): void {
+    super._onComboboxInputBlur();
+    this._opts.filterPattern = '';
+  }
   //#endregion
 
   //#region render functions
@@ -336,15 +341,6 @@ export class VscodeMultiSelect
   }
 
   protected override _renderComboboxFace(): TemplateResult {
-    let inputVal = '';
-
-    if (this._isBeingFiltered) {
-      inputVal = this._opts.filterPattern;
-    } else {
-      const op = this._opts.getSelectedOption();
-      inputVal = op?.label ?? '';
-    }
-
     const activeDescendant =
       this._opts.activeIndex > -1 ? `op-${this._opts.activeIndex}` : '';
     const expanded = this.open ? 'true' : 'false';
@@ -364,7 +360,7 @@ export class VscodeMultiSelect
           spellcheck="false"
           type="text"
           autocomplete="off"
-          .value=${inputVal}
+          .value=${this._opts.filterPattern}
           @focus=${this._onComboboxInputFocus}
           @blur=${this._onComboboxInputBlur}
           @input=${this._onComboboxInputInput}
