Providing null to a readonly property of a HTMLElement leads to an error instead of a warning
Version
3.2.31
Reproduction link
Steps to reproduce
Writing <template><select id="foo" name="foo" :type="undefined" /></template> in a Vue component to see an error in the console: type is a read-only property of HTMLSelectElement.
Browsers:
- Microsoft Edge Version 99.0.1150.30 (Official build) (64-bit)
- Chrome Version 99.0.4844.51 (Official Build) (64-bit)
Error in the console: TypeError: Cannot set property type of #<HTMLSelectElement> which has only a getter (runtime-dom.esm-bundler.js?830f:261)
Browser:
- Firefox Version 98.0 (64-bit)
Error in the console: TypeError: setting getter-only property "type"
What is expected?
Writing <select id="foo" name="foo" type="bar" /> in the template throws a warning and not an error. This is what we should have also when value == null.
What is actually happening?
A JavaScript error is thrown instead of a warning.
In the function patchDOMProp of runtime-dom.esm-bundler.js, it tries to set an empty string to the read-only property: el[key] = '';. The error should be managed by wrapping this line into a try/catch.
#5550 solved