fix(uui-select): 🐛 sets the value to the value of selected option if present

set the element value to the value of selected option

Author: julczka

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

@@ -210,7 +210,11 @@ 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();
+      const selected = this.options.find(option => option.selected);
+      this.value = selected ? selected.value : '';
+    }
     if (changedProperties.has('disabledGroups')) this._createDisabledGroups();
   }
 
@@ -274,7 +278,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;
@@ -117,7 +113,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;
       });