Skip to content

Commit

Permalink
fix(runtime-dom): patchDOMProps should not set _value if element is c…
Browse files Browse the repository at this point in the history
…ustom element
  • Loading branch information
Stefan Mayer committed Oct 22, 2021
1 parent 5eb7263 commit 03de51c
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 1 deletion.
34 changes: 34 additions & 0 deletions packages/runtime-dom/__tests__/patchProps.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,40 @@ describe('runtime-dom: props patching', () => {
expect((el as any)._value).toBe(obj)
})

test('value for custom elements', () => {
class TestElement extends HTMLElement {
constructor() {
super()
}

// intentionally uses _value because this is used in "normal" HTMLElement for storing the object of the set property value
private _value: any
get value() {
return this._value
}

set value(val) {
this._value = val
this.setterCalled++
}

public setterCalled: number = 0
}
window.customElements.define('test-element', TestElement)
const el = document.createElement('test-element') as TestElement
patchProp(el, 'value', null, 'foo')
expect(el.value).toBe('foo')
expect(el.setterCalled).toBe(1)
patchProp(el, 'value', null, null)
expect(el.value).toBe('')
expect(el.setterCalled).toBe(2)
expect(el.getAttribute('value')).toBe(null)
const obj = {}
patchProp(el, 'value', null, obj)
expect(el.value).toBe(obj)
expect(el.setterCalled).toBe(3)
})

// For <input type="text">, setting el.value won't create a `value` attribute
// so we need to add tests for other elements
test('value for non-text input', () => {
Expand Down
7 changes: 6 additions & 1 deletion packages/runtime-dom/src/modules/props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,12 @@ export function patchDOMProp(
return
}

if (key === 'value' && el.tagName !== 'PROGRESS') {
if (
key === 'value' &&
el.tagName !== 'PROGRESS' &&
// custom elements may use _value internally
!el.tagName.includes('-')
) {
// store value as _value as well since
// non-string values will be stringified.
el._value = value
Expand Down

0 comments on commit 03de51c

Please sign in to comment.