fix(runtime-dom): catch more cases of DOM property setting error (#5552)

close #5545

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

@@ -234,12 +234,29 @@ describe('runtime-dom: props patching', () => {
     expect(el.getAttribute('x')).toBe('2')
   })
 
-  test('input with size', () => {
+  test('input with size (number property)', () => {
     const el = document.createElement('input')
     patchProp(el, 'size', null, 100)
     expect(el.size).toBe(100)
     patchProp(el, 'size', 100, null)
     expect(el.getAttribute('size')).toBe(null)
+    expect('Failed setting prop "size" on <input>').toHaveBeenWarnedLast()
+  })
+
+  test('select with type (string property)', () => {
+    const el = document.createElement('select')
+    patchProp(el, 'type', null, 'test')
+    expect(el.type).toBe('select-one')
+    expect('Failed setting prop "type" on <select>').toHaveBeenWarnedLast()
+  })
+
+  test('select with willValidate (boolean property)', () => {
+    const el = document.createElement('select')
+    patchProp(el, 'willValidate', true, null)
+    expect(el.willValidate).toBe(true)
+    expect(
+      'Failed setting prop "willValidate" on <select>'
+    ).toHaveBeenWarnedLast()
   })
 
   test('patch value for select', () => {

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

@@ -51,28 +51,23 @@ export function patchDOMProp(
     return
   }
 
+  let needRemove = false
   if (value === '' || value == null) {
     const type = typeof el[key]
     if (type === 'boolean') {
       // e.g. <select multiple> compiles to { multiple: '' }
-      el[key] = includeBooleanAttr(value)
+      value = includeBooleanAttr(value)
-      return
     } else if (value == null && type === 'string') {
       // e.g. <div :id="null">
-      el[key] = ''
+      value = ''
-      el.removeAttribute(key)
+      needRemove = true
-      return
     } else if (type === 'number') {
       // e.g. <img :width="null">
       // the value of some IDL attr must be greater than 0, e.g. input.size = 0 -> error
-      try {
+      value = 0
-        el[key] = 0
+      needRemove = true
-      } catch {}
-      el.removeAttribute(key)
-      return
     }
-  }
+  } else {
-
     if (
       __COMPAT__ &&
       value === false &&
@@ -89,13 +84,15 @@ export function patchDOMProp(
             parentComponent,
             key
           )
-      el[key] = type === 'number' ? 0 : ''
+        value = type === 'number' ? 0 : ''
-      el.removeAttribute(key)
+        needRemove = true
-      return
+      }
     }
   }
 
-  // some properties perform value validation and throw
+  // some properties perform value validation and throw,
+  // some properties has getter, no setter, will error in 'use strict'
+  // eg. <select :type="null"></select> <select :willValidate="null"></select>
   try {
     el[key] = value
   } catch (e: any) {
@@ -107,4 +104,5 @@ export function patchDOMProp(
       )
     }
   }
+  needRemove && el.removeAttribute(key)
 }