fix: select face isn't updated by selectedIndex

Author: bendera

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

@@ -56,6 +56,7 @@ describe('vscode-single-select', () => {
         </div>
       `);
       expect(el.value).to.eq('Ipsum');
+      expect(el.selectedIndex).to.eq(1);
     });
 
     it('select face should be empty when the value is invalid', async () => {
@@ -81,6 +82,59 @@ describe('vscode-single-select', () => {
         </div>
       `);
       expect(el.value).to.eq('trololo');
+      expect(el.selectedIndex).to.eq(-1);
+    });
+
+    it('should display selected value when selectedIndex 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.selectedIndex = 1;
+      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');
+      expect(el.selectedIndex).to.eq(1);
+    });
+
+    it('select face should be empty when the selectedIndex prop 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.selectedIndex = 999;
+      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('');
+      expect(el.selectedIndex).to.eq(999);
     });
 
     it('should display selected value when an option is clicked', async () => {

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

@@ -29,6 +29,12 @@ export class VscodeSingleSelect extends VscodeSelectBase {
   @property({type: Number})
   set selectedIndex(val: number) {
     this._selectedIndex = val;
+    this._value = this._options[this._selectedIndex]
+      ? this._options[this._selectedIndex].value
+      : '';
+    this._labelText = this._options[this._selectedIndex]
+      ? this._options[this._selectedIndex].label
+      : '';
   }
   get selectedIndex(): number {
     return this._selectedIndex;