prvent setting a value to something different than options

Author: julczka

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;
 
@@ -212,9 +214,16 @@ export class UUISelectElement extends FormControlMixin(LitElement) {
   willUpdate(changedProperties: Map<string | number | symbol, unknown>) {
     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();
   }
 

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

@@ -75,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');