fix: the label cannot be changed programatically

Author: bendera

src/test/vscode-single-select.test.ts

@@ -33,6 +33,56 @@ describe('vscode-single-select', () => {
       expect(el.value).to.eq('Ipsum');
     });
 
+    it('should display selected value when value prop is changed', async () => {
+      const el = (await fixture(html`
+        <vscode-single-select>
+          <vscode-option>Lorem</vscode-option>
+          <vscode-option>Ipsum</vscode-option>
+          <vscode-option>Dolor</vscode-option>
+        </vscode-single-select>
+      `)) as VscodeSingleSelect;
+
+      el.value = 'Ipsum';
+      await el.updateComplete;
+
+      expect(el).shadowDom.to.equal(`
+        <slot class="main-slot"></slot>
+        <div class="select-face">
+          <span class="text">
+            Ipsum
+          </span>
+          <span class="icon">
+          </span>
+        </div>
+      `);
+      expect(el.value).to.eq('Ipsum');
+    });
+
+    it('select face should be empty when the value is invalid', async () => {
+      const el = (await fixture(html`
+        <vscode-single-select>
+          <vscode-option>Lorem</vscode-option>
+          <vscode-option>Ipsum</vscode-option>
+          <vscode-option>Dolor</vscode-option>
+        </vscode-single-select>
+      `)) as VscodeSingleSelect;
+
+      el.value = 'trololo';
+      await el.updateComplete;
+
+      expect(el).shadowDom.to.equal(`
+        <slot class="main-slot"></slot>
+        <div class="select-face">
+          <span class="text">
+            <span class="empty-label-placeholder"></span>
+          </span>
+          <span class="icon">
+          </span>
+        </div>
+      `);
+      expect(el.value).to.eq('trololo');
+    });
+
     it('should display selected value when an option is clicked', async () => {
       const el = (await fixture(html`
         <vscode-single-select>

src/vscode-select/vscode-single-select.ts

@@ -46,6 +46,9 @@ export class VscodeSingleSelect extends VscodeSelectBase {
 
     if (this._selectedIndex > -1) {
       this._options[this._selectedIndex].selected = true;
+      this._labelText = this._options[this._selectedIndex].label;
+    } else {
+      this._labelText = '';
     }
   }
   get value(): string {