diff --git a/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue b/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue index 6203c9514b..7666b7f811 100644 --- a/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue +++ b/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue @@ -75,7 +75,7 @@ v-for="lang in languageOptionsList" :key="'lang-' + lang.value" :checked="isChecked('languages', lang)" - :disabled="lang.disabled || isEnabledButNotSelected('languages', lang)" + :disabled="lang.disabled || isActiveButNotSelected('languages', lang)" :label="lang.label" @change="handleChange('languages', lang)" /> @@ -100,7 +100,7 @@ v-for="level in contentLevelsList" :key="'level-' + level.value" :checked="isChecked('grade_levels', level)" - :disabled="level.disabled || isEnabledButNotSelected('grade_levels', level)" + :disabled="level.disabled || isActiveButNotSelected('grade_levels', level)" :label="level.label" @change="handleChange('grade_levels', level)" /> @@ -152,7 +152,7 @@ v-for="a11y in accessibilityOptionsList" :key="'a11y-' + a11y.value" :checked="isChecked('accessibility_labels', a11y)" - :disabled="a11y.disabled || isEnabledButNotSelected('accessibility_labels', a11y)" + :disabled="a11y.disabled || isActiveButNotSelected('accessibility_labels', a11y)" :label="a11y.label" @change="handleChange('accessibility_labels', a11y)" /> @@ -174,7 +174,7 @@ v-for="need in needsOptionsList" :key="'resource-need-' + need.value" :checked="isChecked('learner_needs', need)" - :disabled="need.disabled || isEnabledButNotSelected('learner_needs', need)" + :disabled="need.disabled || isActiveButNotSelected('learner_needs', need)" :label="need.label" @change="handleChange('learner_needs', need)" /> @@ -389,12 +389,17 @@ this.$emit('input', { ...this.value, categories: { [NoCategories]: true } }); }, isChecked(inputKey, value) { - return this.isSelected(inputKey, value) || this.isEnabledButNotSelected(inputKey, value); + return this.isSelected(inputKey, value) || this.isActiveButNotSelected(inputKey, value); }, isSelected(inputKey, value) { return this.value[inputKey][value.value] === true; }, - isEnabledButNotSelected(inputKey, value) { + isActiveButNotSelected(inputKey, value) { + // When a filter is selected, the other filters are disabled if they are no longer + // applicable. Additionally, some filters are automatically selected because they're + // mutually inclusive with the user's selections. + // This basically just answers the question "is this filter active, but *not* because they + // directly selected it" return ( !this.isSelected(inputKey, value) && Object.values(this.activeSearchTerms[inputKey]).includes(value)