Bug: Value doesn't update when setting the value of select in UI

src/widget-core/vdom.ts

@@ -619,10 +619,10 @@ export function renderer(renderer: () => WNode | VNode): Renderer {
 					propValue = '';
 				}
 				if (propName === 'value') {
-					setValue(domNode, propValue, previousValue);
 					if ((domNode as HTMLElement).tagName === 'SELECT') {
 						(domNode as any)['select-value'] = propValue;
 					}
+					setValue(domNode, propValue, previousValue);
 				} else if (propName !== 'key' && propValue !== previousValue) {
 					const type = typeof propValue;
 					if (type === 'function' && propName.lastIndexOf('on', 0) === 0 && includesEventsAndAttributes) {

tests/widget-core/unit/vdom.ts

@@ -5104,6 +5104,74 @@ jsdomDescribe('vdom', () => {
 			assert.strictEqual((div.children[0] as any).value, 'a');
 		});
 
+		it('should support changing the select value', () => {
+			let change: any;
+			class Select extends WidgetBase {
+				constructor() {
+					super();
+					change = this.change.bind(this);
+				}
+
+				value = '';
+				change(event: any) {
+					this.value = event.target.value;
+					this.invalidate();
+				}
+				render() {
+					return v('select', { onchange: this.change, value: this.value }, [
+						v('option', { value: '' }),
+						v('option', { value: 'a' }, ['a']),
+						v('option', { value: 'b' }, ['b'])
+					]);
+				}
+			}
+
+			const r = renderer(() => w(Select, {}));
+			const div = document.createElement('div');
+			r.mount({ domNode: div, sync: true });
+			assert.strictEqual((div.children[0] as any).value, '');
+			// set the value as this is what happens when the select is click in the browser
+			(div.children[0] as any).value = 'a';
+			change({ target: { value: 'a' } });
+			assert.strictEqual((div.children[0] as any).value, 'a');
+			// set the value as this is what happens when the select is click in the browser
+			(div.children[0] as any).value = 'b';
+			change({ target: { value: 'b' } });
+			assert.strictEqual((div.children[0] as any).value, 'b');
+		});
+
+		it('should support changing the select value - programmatically', () => {
+			let change: any;
+			class Select extends WidgetBase {
+				constructor() {
+					super();
+					change = this.change.bind(this);
+				}
+
+				value = '';
+				change(event: any) {
+					this.value = event.target.value;
+					this.invalidate();
+				}
+				render() {
+					return v('select', { onchange: this.change, value: this.value }, [
+						v('option', { value: '' }),
+						v('option', { value: 'a' }, ['a']),
+						v('option', { value: 'b' }, ['b'])
+					]);
+				}
+			}
+
+			const r = renderer(() => w(Select, {}));
+			const div = document.createElement('div');
+			r.mount({ domNode: div, sync: true });
+			assert.strictEqual((div.children[0] as any).value, '');
+			change({ target: { value: 'a' } });
+			assert.strictEqual((div.children[0] as any).value, 'a');
+			change({ target: { value: 'b' } });
+			assert.strictEqual((div.children[0] as any).value, 'b');
+		});
+
 		it('should support multi-select selects', () => {
 			const r = renderer(() =>
 				v('select', { key: 'multi', multiple: true }, [