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() {