From 55e8c547430b132ed0069d7588916d77e49faaa1 Mon Sep 17 00:00:00 2001 From: Thorsten Luenborg Date: Wed, 17 Nov 2021 17:16:22 +0100 Subject: [PATCH 1/2] fix(runtime-dom): ensure value is explicitly set on OPTION elements even when they have a matching textContent close #4956 --- packages/runtime-dom/__tests__/patchProps.spec.ts | 3 +++ packages/runtime-dom/src/modules/props.ts | 7 ++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts index e1ee7928c84..e2590e2e0ee 100644 --- a/packages/runtime-dom/__tests__/patchProps.spec.ts +++ b/packages/runtime-dom/__tests__/patchProps.spec.ts @@ -29,9 +29,12 @@ describe('runtime-dom: props patching', () => { // so we need to add tests for other elements test('value for non-text input', () => { const el = document.createElement('option') + el.textContent = 'foo' // #4956 patchProp(el, 'value', null, 'foo') + expect(el.getAttribute('value')).toBe('foo') expect(el.value).toBe('foo') patchProp(el, 'value', null, null) + el.textContent = '' expect(el.value).toBe('') // #3475 expect(el.getAttribute('value')).toBe(null) diff --git a/packages/runtime-dom/src/modules/props.ts b/packages/runtime-dom/src/modules/props.ts index d706923966f..296de604602 100644 --- a/packages/runtime-dom/src/modules/props.ts +++ b/packages/runtime-dom/src/modules/props.ts @@ -31,7 +31,12 @@ export function patchDOMProp( // non-string values will be stringified. el._value = value const newValue = value == null ? '' : value - if (el.value !== newValue) { + if ( + el.value !== newValue || + // #4956: for OPTION elements, we need to check for the value attribute because + // el.value returns el.textContent if attribute is absent (i.e. hasn't been set yet) + (el.tagName === 'OPTION' && el.getAttribute('value') !== newValue) + ) { el.value = newValue } if (value == null) { From 19b63f47860e93fdb6f8065b64783af124f7b5eb Mon Sep 17 00:00:00 2001 From: Evan You Date: Thu, 25 Nov 2021 05:00:20 -0500 Subject: [PATCH 2/2] Update props.ts --- packages/runtime-dom/src/modules/props.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/runtime-dom/src/modules/props.ts b/packages/runtime-dom/src/modules/props.ts index 296de604602..63513f34756 100644 --- a/packages/runtime-dom/src/modules/props.ts +++ b/packages/runtime-dom/src/modules/props.ts @@ -33,9 +33,10 @@ export function patchDOMProp( const newValue = value == null ? '' : value if ( el.value !== newValue || - // #4956: for OPTION elements, we need to check for the value attribute because - // el.value returns el.textContent if attribute is absent (i.e. hasn't been set yet) - (el.tagName === 'OPTION' && el.getAttribute('value') !== newValue) + // #4956: always set for OPTION elements because its value falls back to + // textContent if no value attribute is present. And setting .value for + // OPTION has no side effect + el.tagName === 'OPTION' ) { el.value = newValue }