Skip to content

fix(b-form-checkbox/b-form-radio): change event timing (closes #6005) #6008

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jacobmllr95 merged 2 commits into from
Nov 4, 2020
Merged

fix(b-form-checkbox/b-form-radio): change event timing (closes #6005) #6008

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eff8f32
fix(b-form-checkbox/b-form-radio): `chnage` event timing
jacobmllr95 Nov 4, 2020
5f5395b
Merge branch 'dev' into fix-from-checkbox-radio-chnage-timing
jacobmllr95 Nov 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions src/components/form-checkbox/form-checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,16 +102,19 @@ export const BFormCheckbox = /*#__PURE__*/ Vue.extend({
}
this.computedLocalChecked = localChecked

// Change is only emitted on user interaction
this.$emit('change', localChecked)
// Fire events in a `$nextTick()` to ensure the `v-model` is updated
this.$nextTick(() => {
// Change is only emitted on user interaction
this.$emit('change', localChecked)

// If this is a child of `<form-checkbox-group>`,
// we emit a change event on it as well
if (this.isGroup) {
this.bvGroup.$emit('change', localChecked)
}
// If this is a child of `<form-checkbox-group>`,
// we emit a change event on it as well
if (this.isGroup) {
this.bvGroup.$emit('change', localChecked)
}

this.$emit('update:indeterminate', indeterminate)
this.$emit('update:indeterminate', indeterminate)
})
},
setIndeterminate(state) {
// Indeterminate only supported in single checkbox mode
Expand Down
31 changes: 19 additions & 12 deletions src/components/form-radio/form-radio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,9 @@ export const BFormRadio = /*#__PURE__*/ Vue.extend({
}
},
computed: {
// Radio Groups can only have a single value, so determining if checked is simple
isChecked() {
return looseEqual(this.value, this.computedLocalChecked)
},
// Flags for form-radio-check mixin
isRadio() {
return true
},
Expand All @@ -44,21 +42,30 @@ export const BFormRadio = /*#__PURE__*/ Vue.extend({
}
},
watch: {
// Radio Groups can only have a single value, so our watchers are simple
computedLocalChecked() {
this.$emit('input', this.computedLocalChecked)
computedLocalChecked(newValue, oldValue) {
if (!looseEqual(newValue, oldValue)) {
this.$emit('input', newValue)
}
}
},
methods: {
handleChange({ target: { checked } }) {
const value = this.value
const { value } = this
const localChecked = checked ? value : null

this.computedLocalChecked = value
// Change is only emitted on user interaction
this.$emit('change', checked ? value : null)
// If this is a child of form-radio-group, we emit a change event on it as well
if (this.isGroup) {
this.bvGroup.$emit('change', checked ? value : null)
}

// Fire events in a `$nextTick()` to ensure the `v-model` is updated
this.$nextTick(() => {
// Change is only emitted on user interaction
this.$emit('change', localChecked)

// If this is a child of `<form-radio-group>`,
// we emit a change event on it as well
if (this.isGroup) {
this.bvGroup.$emit('change', localChecked)
}
})
}
}
})