diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts index bec0f9ba342..88080ff92ab 100644 --- a/packages/runtime-dom/__tests__/patchProps.spec.ts +++ b/packages/runtime-dom/__tests__/patchProps.spec.ts @@ -9,6 +9,7 @@ describe('runtime-dom: props patching', () => { // prop with string value should be set to empty string on null values patchProp(el, 'id', null, null) expect(el.id).toBe('') + expect(el.getAttribute('id')).toBe(null) }) test('value', () => { @@ -17,12 +18,25 @@ describe('runtime-dom: props patching', () => { expect(el.value).toBe('foo') patchProp(el, 'value', null, null) expect(el.value).toBe('') + expect(el.getAttribute('value')).toBe(null) const obj = {} patchProp(el, 'value', null, obj) expect(el.value).toBe(obj.toString()) expect((el as any)._value).toBe(obj) }) + // For , setting el.value won't create a `value` attribute + // so we need to add tests for other elements + test('value for non-text input', () => { + const el = document.createElement('option') + patchProp(el, 'value', null, 'foo') + expect(el.value).toBe('foo') + patchProp(el, 'value', null, null) + expect(el.value).toBe('') + // #3475 + expect(el.getAttribute('value')).toBe(null) + }) + test('boolean prop', () => { const el = document.createElement('select') patchProp(el, 'multiple', null, '') diff --git a/packages/runtime-dom/src/modules/props.ts b/packages/runtime-dom/src/modules/props.ts index 01a16a58cba..f312020e7f3 100644 --- a/packages/runtime-dom/src/modules/props.ts +++ b/packages/runtime-dom/src/modules/props.ts @@ -33,6 +33,9 @@ export function patchDOMProp( if (el.value !== newValue) { el.value = newValue } + if (value == null) { + el.removeAttribute('value') + } return }