diff --git a/CHANGELOG.md b/CHANGELOG.md index 6478b198b..590b02693 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,16 @@ Changelog is rather internal in nature. See release notes for the public overvie ## Version 4.x.x (`release-v4` branch) +- [#744] + - **Description:** Removes internal state management for checked & indeterminate in KCheckbox. + - **Products impact:** Updated API + - **Addresses:** https://github.com/learningequality/studio/issues/4636 + - **Components:** KCheckbox + - **Breaking:** No + - **Impacts a11y:** No + - **Guidance:** If you use KCheckbox, it is your responsibility to handle the `change` event and update whether or not the given `checked` and `indeterminate` props reflect the reality that you expect. + +[#744]: [PR link](https://github.com/learningequality/kolibri-design-system/pull/744) - [#737] - **Description:** Bump KDS version to 4.4.1. diff --git a/lib/KCheckbox.vue b/lib/KCheckbox.vue index f1e7a4314..4b4fa767d 100644 --- a/lib/KCheckbox.vue +++ b/lib/KCheckbox.vue @@ -14,8 +14,8 @@ type="checkbox" class="k-checkbox-input" :aria-checked="ariaChecked" - :checked="isCurrentlyChecked" - :indeterminate.prop="isCurrentlyIndeterminate" + :checked="checked" + :indeterminate.prop="indeterminate" :disabled="disabled" @click.stop="toggleCheck" @focus="isActive = true" @@ -24,13 +24,13 @@ > ({ - isCurrentlyChecked: false, - isCurrentlyIndeterminate: false, isActive: false, }), computed: { ariaChecked() { - return this.isCurrentlyIndeterminate ? 'mixed' : this.isCurrentlyChecked ? 'true' : 'false'; + return this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false'; }, id() { return `k-checkbox-${this._uid}`; @@ -152,28 +150,14 @@ }; }, }, - watch: { - checked(newCheckedState) { - this.isCurrentlyChecked = newCheckedState; - }, - indeterminate(newIndeterminateState) { - this.isCurrentlyIndeterminate = newIndeterminateState; - }, - }, - created() { - this.isCurrentlyChecked = this.checked; - this.isCurrentlyIndeterminate = this.indeterminate; - }, methods: { toggleCheck(event) { if (!this.disabled) { - this.isCurrentlyChecked = !this.isCurrentlyChecked; this.$refs.kCheckboxInput.focus(); - this.isCurrentlyIndeterminate = false; /** * Emits change event */ - this.$emit('change', this.isCurrentlyChecked, event); + this.$emit('change', !this.checked, event); } }, markInactive() {