fix(b-form-checkbox-group): only emit input when value loosely changes (#5432)

tmorehouse · web-flow · commit e76d40874bd2 · 2020-05-25T18:18:42.000+02:00
* fix(b-form-checkbox-group, b-form-radio-group): only emit `input` when value loosely changes

* Update loose-equal.js

* Update form-checkbox-group.spec.js
diff --git a/src/components/form-checkbox/form-checkbox-group.spec.js b/src/components/form-checkbox/form-checkbox-group.spec.js
@@ -363,6 +363,54 @@ describe('form-checkbox-group', () => {
     wrapper.destroy()
   })
 
+  it('does not emit "input" event when value loosely changes', async () => {
+    const value = ['one', 'two', 'three']
+    const wrapper = mount(BFormCheckboxGroup, {
+      attachTo: createContainer(),
+      propsData: {
+        options: value.slice(),
+        checked: value.slice()
+      }
+    })
+    expect(wrapper.classes()).toBeDefined()
+    const checks = wrapper.findAll('input')
+    expect(checks.length).toBe(3)
+    expect(wrapper.vm.localChecked).toEqual(value)
+    expect(checks.wrappers.every(c => c.find('input[type=checkbox]').exists())).toBe(true)
+    expect(checks.at(0).element.checked).toBe(true)
+    expect(checks.at(1).element.checked).toBe(true)
+    expect(checks.at(2).element.checked).toBe(true)
+
+    expect(wrapper.emitted('input')).not.toBeDefined()
+
+    // Set internal value to new array reference
+    wrapper.vm.localChecked = value.slice()
+    await waitNT(wrapper.vm)
+
+    expect(wrapper.vm.localChecked).toEqual(value)
+    expect(checks.wrappers.every(c => c.find('input[type=checkbox]').exists())).toBe(true)
+    expect(checks.at(0).element.checked).toBe(true)
+    expect(checks.at(1).element.checked).toBe(true)
+    expect(checks.at(2).element.checked).toBe(true)
+
+    expect(wrapper.emitted('input')).not.toBeDefined()
+
+    // Set internal value to new array (reversed order)
+    wrapper.vm.localChecked = value.slice().reverse()
+    await waitNT(wrapper.vm)
+
+    expect(wrapper.vm.localChecked).toEqual(value.slice().reverse())
+    expect(checks.wrappers.every(c => c.find('input[type=checkbox]').exists())).toBe(true)
+    expect(checks.at(0).element.checked).toBe(true)
+    expect(checks.at(1).element.checked).toBe(true)
+    expect(checks.at(2).element.checked).toBe(true)
+    expect(wrapper.emitted('input')).toBeDefined()
+    expect(wrapper.emitted('input').length).toBe(1)
+    expect(wrapper.emitted('input')[0][0]).toEqual(value.slice().reverse())
+
+    wrapper.destroy()
+  })
+
   it('checkboxes reflect group checked v-model', async () => {
     const wrapper = mount(BFormCheckboxGroup, {
       attachTo: createContainer(),
diff --git a/src/mixins/form-radio-check-group.js b/src/mixins/form-radio-check-group.js
@@ -1,4 +1,5 @@
 import { htmlOrText } from '../utils/html'
+import looseEqual from '../utils/loose-equal'
 import normalizeSlotMixin from './normalize-slot'
 import { BFormCheckbox } from '../components/form-checkbox/form-checkbox'
 import { BFormRadio } from '../components/form-radio/form-radio'
@@ -70,8 +71,10 @@ export default {
     checked(newVal) {
       this.localChecked = newVal
     },
-    localChecked(newVal) {
-      this.$emit('input', newVal)
+    localChecked(newVal, oldVal) {
+      if (!looseEqual(newVal, oldVal)) {
+        this.$emit('input', newVal)
+      }
     }
   },
   render(h) {
diff --git a/src/utils/loose-equal.js b/src/utils/loose-equal.js
@@ -1,4 +1,4 @@
-import { keys } from './object'
+import { hasOwnProperty, keys } from './object'
 import { isArray, isDate, isObject } from './inspect'
 
 // Assumes both a and b are arrays!
@@ -46,10 +46,8 @@ const looseEqual = (a, b) => {
       return false
     }
     for (const key in a) {
-      // eslint-disable-next-line no-prototype-builtins
-      const aHasKey = a.hasOwnProperty(key)
-      // eslint-disable-next-line no-prototype-builtins
-      const bHasKey = b.hasOwnProperty(key)
+      const aHasKey = hasOwnProperty(a, key)
+      const bHasKey = hasOwnProperty(b, key)
       if ((aHasKey && !bHasKey) || (!aHasKey && bHasKey) || !looseEqual(a[key], b[key])) {
         return false
       }
