fix(runtime-dom): also set attribute for form element state

close #6007 close #6012
vuejs · May 31, 2024 · 537a571 · 537a571
1 parent a52a02f
commit 537a571
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/packages/runtime-dom/src/modules/attrs.ts b/packages/runtime-dom/src/modules/attrs.ts
@@ -18,6 +18,7 @@ export function patchAttr(
   value: any,
   isSVG: boolean,
   instance?: ComponentInternalInstance | null,
+  isBoolean = isSpecialBooleanAttr(key),
 ) {
   if (isSVG && key.startsWith('xlink:')) {
     if (value == null) {
@@ -32,7 +33,6 @@ export function patchAttr(
 
     // note we are only checking boolean attributes that don't have a
     // corresponding dom prop of the same name here.
-    const isBoolean = isSpecialBooleanAttr(key)
     if (value == null || (isBoolean && !includeBooleanAttr(value))) {
       el.removeAttribute(key)
     } else {

diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
@@ -52,6 +52,11 @@ export const patchProp: DOMRendererOptions['patchProp'] = (
       parentSuspense,
       unmountChildren,
     )
+    // #6007 also set form state as attributes so they work with
+    // <input type="reset"> or libs / extensions that expect attributes
+    if (key === 'value' || key === 'checked' || key === 'selected') {
+      patchAttr(el, key, nextValue, isSVG, parentComponent, key !== 'value')
+    }
   } else {
     // special case for <input v-model type="checkbox"> with
     // :true-value & :false-value