fix(compat): fix compat handler of draggable (#12445)

fix #12444

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

@@ -59,11 +59,11 @@ export function compatCoerceAttr(
 ): boolean {
   if (isEnumeratedAttr(key)) {
     const v2CoercedValue =
-      value === null
-        ? 'false'
-        : typeof value !== 'boolean' && value !== undefined
-          ? 'true'
-          : null
+      value === undefined
+        ? null
+        : value === null || value === false || value === 'false'
+          ? 'false'
+          : 'true'
     if (
       v2CoercedValue &&
       compatUtils.softAssertCompatEnabled(

packages/vue-compat/__tests__/misc.spec.ts

@@ -275,3 +275,24 @@ test('ATTR_ENUMERATED_COERCION', () => {
     )('contenteditable', 'foo', 'true'),
   ).toHaveBeenWarned()
 })
+
+test('ATTR_ENUMERATED_COERCION, coercing "false"', () => {
+  const vm = new Vue({
+    template: `<div><div draggable="false" :spellcheck="false">hello</div></div>`,
+  }).$mount()
+  expect(vm.$el.innerHTML).toBe(
+    `<div draggable="false" spellcheck="false">hello</div>`,
+  )
+  expect(
+    (
+      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
+        .message as Function
+    )('draggable', 'false', 'false'),
+  ).toHaveBeenWarned()
+  expect(
+    (
+      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
+        .message as Function
+    )('spellcheck', 'false', 'false'),
+  ).toHaveBeenWarned()
+})