Skip to content

Commit 4495373

Browse files
authored
fix(runtime-dom): check attribute value when setting option value (#8246)
fix #8227
1 parent bf16697 commit 4495373

File tree

2 files changed

+17
-10
lines changed

2 files changed

+17
-10
lines changed

packages/runtime-dom/__tests__/patchProps.spec.ts

+8
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,14 @@ describe('runtime-dom: props patching', () => {
2424
patchProp(el, 'value', null, obj)
2525
expect(el.value).toBe(obj.toString())
2626
expect((el as any)._value).toBe(obj)
27+
28+
const option = document.createElement('option')
29+
patchProp(option, 'textContent', null, 'foo')
30+
expect(option.value).toBe('foo')
31+
expect(option.getAttribute('value')).toBe(null)
32+
patchProp(option, 'value', null, 'foo')
33+
expect(option.value).toBe('foo')
34+
expect(option.getAttribute('value')).toBe('foo')
2735
})
2836

2937
test('value for custom elements', () => {

packages/runtime-dom/src/modules/props.ts

+9-10
Original file line numberDiff line numberDiff line change
@@ -26,23 +26,22 @@ export function patchDOMProp(
2626
return
2727
}
2828

29+
const tag = el.tagName
30+
2931
if (
3032
key === 'value' &&
31-
el.tagName !== 'PROGRESS' &&
33+
tag !== 'PROGRESS' &&
3234
// custom elements may use _value internally
33-
!el.tagName.includes('-')
35+
!tag.includes('-')
3436
) {
3537
// store value as _value as well since
3638
// non-string values will be stringified.
3739
el._value = value
40+
// #4956: <option> value will fallback to its text content so we need to
41+
// compare against its attribute value instead.
42+
const oldValue = tag === 'OPTION' ? el.getAttribute('value') : el.value
3843
const newValue = value == null ? '' : value
39-
if (
40-
el.value !== newValue ||
41-
// #4956: always set for OPTION elements because its value falls back to
42-
// textContent if no value attribute is present. And setting .value for
43-
// OPTION has no side effect
44-
el.tagName === 'OPTION'
45-
) {
44+
if (oldValue !== newValue) {
4645
el.value = newValue
4746
}
4847
if (value == null) {
@@ -98,7 +97,7 @@ export function patchDOMProp(
9897
// do not warn if value is auto-coerced from nullish values
9998
if (__DEV__ && !needRemove) {
10099
warn(
101-
`Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: ` +
100+
`Failed setting prop "${key}" on <${tag.toLowerCase()}>: ` +
102101
`value ${value} is invalid.`,
103102
e
104103
)

0 commit comments

Comments
 (0)