uui select: Sets its Form Value to selected option (#205)

Author: nielslyngsoe

packages/uui-select/lib/uui-select.element.ts

@@ -158,6 +158,8 @@ export class UUISelectElement extends FormControlMixin(LitElement) {
   @state()
   private _disabledGroups: string[] = [];
 
+  private _values: string[] = [];
+
   @query('#native')
   protected _input!: HTMLSelectElement;
 
@@ -210,7 +212,18 @@ export class UUISelectElement extends FormControlMixin(LitElement) {
   }
 
   willUpdate(changedProperties: Map<string | number | symbol, unknown>) {
-    if (changedProperties.has('options')) this._extractGroups();
+    if (changedProperties.has('options')) {
+      this._extractGroups();
+      this._values = this.options.map(option => option.value);
+      const selected = this.options.find(option => option.selected);
+      this.value = selected ? selected.value : '';
+    }
+
+    if (changedProperties.has('value')) {
+      this.value = this._values.includes(this.value as string)
+        ? this.value
+        : '';
+    }
     if (changedProperties.has('disabledGroups')) this._createDisabledGroups();
   }
 
@@ -274,7 +287,8 @@ export class UUISelectElement extends FormControlMixin(LitElement) {
       aria-label=${this.label}
       @change=${this.setValue}
       ?disabled=${this.disabled}
-      .name=${this.name}>
+      .name=${this.name}
+      .value=${this.value as string}>
       <option disabled selected value="" hidden>${this.placeholder}</option>
       ${this._renderGrouped()}
       ${this.options

packages/uui-select/lib/uui-select.test.ts

@@ -3,7 +3,7 @@ import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import { UUISelectElement } from './uui-select.element';
 
 const options: Array<Option> = [
-  { name: 'Carrot', value: 'orange' },
+  { name: 'Carrot', value: 'orange', selected: true },
   { name: 'Cucumber', value: 'green' },
   { name: 'Aubergine', value: 'purple' },
   { name: 'Blueberry', value: 'Blue' },
@@ -64,11 +64,7 @@ describe('UUISelect in Form', () => {
   beforeEach(async () => {
     formElement = await fixture(
       html` <form>
-        <uui-select
-          label="foo"
-          name="bar"
-          .options=${options}
-          value=${options[0].value}></uui-select>
+        <uui-select label="foo" name="bar" .options=${options}></uui-select>
       </form>`
     );
     element = formElement.querySelector('uui-select') as any;
@@ -79,6 +75,14 @@ describe('UUISelect in Form', () => {
     expect(element.value).to.be.equal('orange');
   });
 
+  it('if value is set to a string that is not in the options array the value is empty string', async () => {
+    element.value = 'something silly';
+    await elementUpdated(element);
+    const formData = new FormData(formElement);
+    expect(element.value).to.be.equal('');
+    expect(formData.get('bar')).to.be.equal('');
+  });
+
   it('form output', () => {
     const formData = new FormData(formElement);
     expect(formData.get('bar')).to.be.equal('orange');
@@ -117,7 +121,9 @@ describe('UUISelect in Form', () => {
         await elementUpdated(element);
       });
 
-      it('sets element to invalid when value is empty', () => {
+      it('sets element to invalid when value is empty', async () => {
+        element.value = '';
+        await elementUpdated(element);
         expect(element.checkValidity()).to.be.false;
       });