fix: fix checkbox event edge case in Firefox

handsome-xuan · Jan 24, 2019 · 1868561 · 1868561
1 parent 8cb2069
commit 1868561
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 31 deletions.
diff --git a/src/platforms/web/runtime/modules/dom-props.js b/src/platforms/web/runtime/modules/dom-props.js
@@ -45,7 +45,7 @@ function updateDOMProps (oldVnode: VNodeWithData, vnode: VNodeWithData) {
     // In Chrome / Firefox, click event fires before change, thus having this problem.
     // In Safari / Edge, the order is opposite.
     // Note: in Edge, if you click too fast, only the click event would fire twice.
-    if (key === 'checked' && !isNotInFocusAndDirty(elm, cur)) {
+    if (key === 'checked' && cur === oldProps[key]) {
       continue
     }
 

diff --git a/test/unit/features/directives/model-checkbox.spec.js b/test/unit/features/directives/model-checkbox.spec.js
@@ -56,6 +56,7 @@ describe('Directive v-model checkbox', () => {
       },
       template: `
         <div>
+          {{ test }}
           <input type="checkbox" v-model="test" value="1">
           <input type="checkbox" v-model="test" value="2">
         </div>
@@ -65,13 +66,16 @@ describe('Directive v-model checkbox', () => {
     expect(vm.$el.children[0].checked).toBe(true)
     expect(vm.$el.children[1].checked).toBe(false)
     vm.$el.children[0].click()
-    expect(vm.test.length).toBe(0)
-    vm.$el.children[1].click()
-    expect(vm.test).toEqual(['2'])
-    vm.$el.children[0].click()
-    expect(vm.test).toEqual(['2', '1'])
-    vm.test = ['1']
     waitForUpdate(() => {
+      expect(vm.test.length).toBe(0)
+      vm.$el.children[1].click()
+    }).then(() => {
+      expect(vm.test).toEqual(['2'])
+      vm.$el.children[0].click()
+    }).then(() => {
+      expect(vm.test).toEqual(['2', '1'])
+      vm.test = ['1']
+    }).then(() => {
       expect(vm.$el.children[0].checked).toBe(true)
       expect(vm.$el.children[1].checked).toBe(false)
     }).then(done)
@@ -93,13 +97,16 @@ describe('Directive v-model checkbox', () => {
     expect(vm.$el.children[0].checked).toBe(true)
     expect(vm.$el.children[1].checked).toBe(false)
     vm.$el.children[0].click()
-    expect(vm.test.length).toBe(0)
-    vm.$el.children[1].click()
-    expect(vm.test).toEqual(['2'])
-    vm.$el.children[0].click()
-    expect(vm.test).toEqual(['2', '1'])
-    vm.test = ['1']
     waitForUpdate(() => {
+      expect(vm.test.length).toBe(0)
+      vm.$el.children[1].click()
+    }).then(() => {
+      expect(vm.test).toEqual(['2'])
+      vm.$el.children[0].click()
+    }).then(() => {
+      expect(vm.test).toEqual(['2', '1'])
+      vm.test = ['1']
+    }).then(() => {
       expect(vm.$el.children[0].checked).toBe(true)
       expect(vm.$el.children[1].checked).toBe(false)
     }).then(done)
@@ -121,13 +128,16 @@ describe('Directive v-model checkbox', () => {
     expect(vm.$el.children[0].checked).toBe(true)
     expect(vm.$el.children[1].checked).toBe(false)
     vm.$el.children[0].click()
-    expect(vm.test.length).toBe(0)
-    vm.$el.children[1].click()
-    expect(vm.test).toEqual([2])
-    vm.$el.children[0].click()
-    expect(vm.test).toEqual([2, 1])
-    vm.test = [1]
     waitForUpdate(() => {
+      expect(vm.test.length).toBe(0)
+      vm.$el.children[1].click()
+    }).then(() => {
+      expect(vm.test).toEqual([2])
+      vm.$el.children[0].click()
+    }).then(() => {
+      expect(vm.test).toEqual([2, 1])
+      vm.test = [1]
+    }).then(() => {
       expect(vm.$el.children[0].checked).toBe(true)
       expect(vm.$el.children[1].checked).toBe(false)
     }).then(done)
@@ -149,13 +159,16 @@ describe('Directive v-model checkbox', () => {
     expect(vm.$el.children[0].checked).toBe(true)
     expect(vm.$el.children[1].checked).toBe(false)
     vm.$el.children[0].click()
-    expect(vm.test.length).toBe(0)
-    vm.$el.children[1].click()
-    expect(vm.test).toEqual([{ a: 2 }])
-    vm.$el.children[0].click()
-    expect(vm.test).toEqual([{ a: 2 }, { a: 1 }])
-    vm.test = [{ a: 1 }]
     waitForUpdate(() => {
+      expect(vm.test.length).toBe(0)
+      vm.$el.children[1].click()
+    }).then(() => {
+      expect(vm.test).toEqual([{ a: 2 }])
+      vm.$el.children[0].click()
+    }).then(() => {
+      expect(vm.test).toEqual([{ a: 2 }, { a: 1 }])
+      vm.test = [{ a: 1 }]
+    }).then(() => {
       expect(vm.$el.children[0].checked).toBe(true)
       expect(vm.$el.children[1].checked).toBe(false)
     }).then(done)
@@ -177,13 +190,16 @@ describe('Directive v-model checkbox', () => {
     expect(vm.$el.children[0].checked).toBe(true)
     expect(vm.$el.children[1].checked).toBe(false)
     vm.$el.children[0].click()
-    expect(vm.test.length).toBe(0)
-    vm.$el.children[1].click()
-    expect(vm.test).toEqual([[2]])
-    vm.$el.children[0].click()
-    expect(vm.test).toEqual([[2], { a: 1 }])
-    vm.test = [{ a: 1 }]
     waitForUpdate(() => {
+      expect(vm.test.length).toBe(0)
+      vm.$el.children[1].click()
+    }).then(() => {
+      expect(vm.test).toEqual([[2]])
+      vm.$el.children[0].click()
+    }).then(() => {
+      expect(vm.test).toEqual([[2], { a: 1 }])
+      vm.test = [{ a: 1 }]
+    }).then(() => {
       expect(vm.$el.children[0].checked).toBe(true)
       expect(vm.$el.children[1].checked).toBe(false)
     }).then(done)