From abea70192120823467d8c5fe847442f469a49765 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 17 Aug 2026 01:30:25 +0530
Subject: [PATCH 1/5] Refactor CategoryOptions dropdown to KMultiSelect,
 keeping expanded mode unchanged

---
 .../contentNodeFields/CategoryOptions.vue     | 84 ++++++++++++++++++-
 1 file changed, 80 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
index cc81b17e5e..f5913a5a8c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
@@ -1,7 +1,38 @@
 <template>
 
   <div>
-    <DropdownWrapper>
+    <KMultiSelect
+      v-if="!expanded"
+      :value="autocompleteValues"
+      :options="categoriesList"
+      itemValue="value"
+      itemText="text"
+      :label="translateMetadataString('category')"
+      :multiple="true"
+      :autoPromoteParent="false"
+      clearable
+      :noResultsText="$tr('noCategoryFoundText')"
+      :messages="messages"
+      @input="onKMultiSelectInput"
+    >
+      <template #chip="{ option, remove: removeChip }">
+        <span :ref="'category-chip-' + option.value">
+          <KChip
+            :text="option.text"
+            close
+            @close="removeChip"
+          />
+        </span>
+        <KTooltip
+          :reference="'category-chip-' + option.value"
+          :refs="$refs"
+          placement="top"
+          :text="tooltipText(option.value)"
+        />
+      </template>
+    </KMultiSelect>
+
+    <DropdownWrapper v-if="expanded">
       <template #default="{ attach, menuProps }">
         <VAutocomplete
           :value="autocompleteValues"
@@ -18,8 +49,8 @@
           :menu-props="{
             ...menuProps,
             zIndex: 4,
-            height: expanded ? 0 : 'auto',
-            maxHeight: expanded ? 0 : 300,
+            height: 0,
+            maxHeight: 0,
           }"
           :attach="attach"
           @click:clear="$nextTick(() => removeAll())"
@@ -104,13 +135,15 @@
 <script>
 
   import camelCase from 'lodash/camelCase';
+  import KMultiSelect from 'kolibri-design-system/lib/candidate/multiselect/KMultiSelect';
+  import KChip from 'kolibri-design-system/lib/candidate/multiselect/KChip';
   import { getSortedCategories } from 'shared/utils/helpers';
   import DropdownWrapper from 'shared/views/form/DropdownWrapper';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
 
   export default {
     name: 'CategoryOptions',
-    components: { DropdownWrapper },
+    components: { KMultiSelect, KChip, DropdownWrapper },
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
       /**
@@ -177,6 +210,22 @@
           option.text.toLowerCase().includes(searchQuery),
         );
       },
+      messages() {
+        return {
+          clearText: () => this.$tr('clearText'),
+          open: () => this.$tr('openMenu'),
+          close: () => this.$tr('closeMenu'),
+          clickable: () => this.$tr('optionsClickable'),
+          allOptionsSelected: () => this.$tr('allOptionsSelected'),
+          allOptionsDeselected: () => this.$tr('allOptionsDeselected'),
+          optionDeselected: () => this.$tr('optionDeselected'),
+          partiallySelected: () => this.$tr('partiallySelected'),
+          itemsSelected: ({ count }) => this.$tr('itemsSelected', { count }),
+          selected: ({ label }) => this.$tr('categorySelected', { label }),
+          removed: ({ label }) => this.$tr('categoryRemoved', { label }),
+          cleared: () => this.$tr('allCategoriesCleared'),
+        };
+      },
     },
     methods: {
       treeItemStyle(item) {
@@ -201,6 +250,21 @@
       removeAll() {
         this.selected = {};
       },
+      // Rebuilds the { category: [nodeIds] } object from KMultiSelect's flat
+      // array. Categories not applied to every edited node are invisible to
+      // KMultiSelect (see autocompleteValues), so they are carried over untouched.
+      onKMultiSelectInput(newValues) {
+        const newSelected = {};
+        Object.entries(this.selected).forEach(([category, ids]) => {
+          if (ids.length !== this.nodeIds.length) {
+            newSelected[category] = ids;
+          }
+        });
+        newValues.forEach(value => {
+          newSelected[value] = this.nodeIds;
+        });
+        this.selected = newSelected;
+      },
       tooltipText(optionId) {
         const option = this.categoriesList.find(option => option.value === optionId);
         if (!option) {
@@ -275,6 +339,18 @@
     },
     $trs: {
       noCategoryFoundText: 'Category not found',
+      clearText: 'Clear all',
+      openMenu: 'Open menu',
+      closeMenu: 'Close menu',
+      optionsClickable: 'Options are clickable',
+      allOptionsSelected: 'All options selected',
+      allOptionsDeselected: 'No options selected',
+      optionDeselected: 'Option deselected',
+      partiallySelected: 'Partially selected',
+      itemsSelected: '{count, plural, one {# category selected} other {# categories selected}}',
+      categorySelected: 'Selected {label}',
+      categoryRemoved: 'Removed {label}',
+      allCategoriesCleared: 'All categories cleared',
     },
   };
 

From a461724e3224d95a75ce60bfdeb5d7ac308dfc41 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 17 Aug 2026 01:30:28 +0530
Subject: [PATCH 2/5] Rewrite CategoryOptions tests with Testing Library

---
 .../__tests__/categoryOptions.spec.js         | 171 ++++++++++++------
 1 file changed, 115 insertions(+), 56 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
index b1d027d5b1..e51013557c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
@@ -1,81 +1,140 @@
-import { shallowMount } from '@vue/test-utils';
+import { render, screen, within } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import VueRouter from 'vue-router';
 import CategoryOptions from '../CategoryOptions.vue';
 
-function makeWrapper({ value = {}, nodeIds = ['node1'] } = {}) {
-  return shallowMount(CategoryOptions, {
-    propsData: {
-      value,
-      nodeIds,
-    },
+const SCHOOL = 'd&WXdXWF';
+const ARTS = 'd&WXdXWF.5QAjgfv7';
+const DANCE = 'd&WXdXWF.5QAjgfv7.BUMJJBnS';
+const MUSIC = 'd&WXdXWF.5QAjgfv7.u0aKjT4i';
+
+const SCHOOL_LABEL = 'School';
+const ARTS_LABEL = 'Arts';
+const DANCE_LABEL = 'Dance';
+const MUSIC_LABEL = 'Music';
+const DANCE_PATH = 'School - Arts - Dance';
+
+const NODE_1 = 'node1';
+const NODE_2 = 'node2';
+
+function renderComponent({ value = {}, nodeIds = [NODE_1], expanded = false } = {}) {
+  return render(CategoryOptions, {
+    props: { value, nodeIds, expanded },
+    routes: new VueRouter(),
   });
 }
 
+function lastInput(emitted) {
+  const events = emitted().input;
+  return events[events.length - 1][0];
+}
+
 describe('CategoryOptions', () => {
-  it('smoke test', () => {
-    const wrapper = makeWrapper();
-    expect(wrapper.exists()).toBe(true);
+  it('renders the category field', () => {
+    renderComponent();
+    expect(screen.getByText('Category')).toBeInTheDocument();
   });
 
-  it('emits expected data', () => {
-    const wrapper = makeWrapper();
-    const value = 'string';
-    wrapper.vm.$emit('input', value);
+  describe('dropdown mode (KMultiSelect)', () => {
+    it('shows a chip only for categories applied to every edited node', () => {
+      renderComponent({
+        value: {
+          [DANCE]: [NODE_1, NODE_2],
+          [MUSIC]: [NODE_1],
+        },
+        nodeIds: [NODE_1, NODE_2],
+      });
 
-    expect(wrapper.emitted().input).toBeTruthy();
-    expect(wrapper.emitted().input.length).toBe(1);
-    expect(wrapper.emitted().input[0]).toEqual([value]);
-  });
+      // The closed dropdown stays in the DOM (v-show), so queries must not look inside it.
+      const chipsArea = within(screen.getByRole('group'));
+      expect(chipsArea.getAllByText(DANCE_LABEL).length).toBeGreaterThan(0);
+      expect(chipsArea.queryByText(MUSIC_LABEL)).not.toBeInTheDocument();
+    });
 
-  describe('display', () => {
-    it('has a tooltip that displays the tree for value of an item', () => {
-      const wrapper = makeWrapper();
-      const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS'; // 'Dance'
-      const expectedToolTip = 'School - Arts - Dance';
+    it('shows the full category path in the chip tooltip', async () => {
+      renderComponent({ value: { [DANCE]: [NODE_1] } });
 
-      expect(wrapper.vm.tooltipText(item)).toEqual(expectedToolTip);
+      expect(await screen.findByText(DANCE_PATH)).toBeInTheDocument();
     });
-    it(`dropdown has 'levels' key necessary to display the nested structure of categories`, () => {
-      const wrapper = makeWrapper();
-      const dropdown = wrapper.vm.categoriesList;
-      const everyCategoryHasLevelsKey = dropdown.every(item => 'level' in item);
 
-      expect(everyCategoryHasLevelsKey).toBeTruthy();
+    it('renders parent categories as named groups in the dropdown', async () => {
+      renderComponent();
+
+      await userEvent.click(screen.getByRole('combobox'));
+
+      const school = await screen.findByRole('group', { name: SCHOOL_LABEL });
+      expect(within(school).getByRole('option', { name: DANCE_LABEL })).toBeInTheDocument();
+    });
+
+    it('emits the selection as an object applying each category to all edited nodes', async () => {
+      const { emitted } = renderComponent({ nodeIds: [NODE_1, NODE_2] });
+
+      await userEvent.click(screen.getByRole('combobox'));
+      await userEvent.click(await screen.findByRole('option', { name: SCHOOL_LABEL }));
+
+      expect(lastInput(emitted)).toEqual({
+        [SCHOOL]: [NODE_1, NODE_2],
+      });
+    });
+
+    it('preserves partially applied categories when the selection changes', async () => {
+      const { emitted } = renderComponent({
+        value: { [MUSIC]: [NODE_1] },
+        nodeIds: [NODE_1, NODE_2],
+      });
+
+      await userEvent.click(screen.getByRole('combobox'));
+      await userEvent.click(await screen.findByRole('option', { name: SCHOOL_LABEL }));
+
+      expect(lastInput(emitted)).toEqual({
+        [MUSIC]: [NODE_1],
+        [SCHOOL]: [NODE_1, NODE_2],
+      });
     });
-  });
 
-  describe('interactions', () => {
-    it('when user checks an item, that is emitted to the parent component', () => {
-      const wrapper = makeWrapper();
-      const item = 'abcd';
-      wrapper.vm.$emit = jest.fn();
-      wrapper.vm.add(item);
+    it('removes a category when its chip close button is clicked', async () => {
+      const { emitted } = renderComponent({ value: { [DANCE]: [NODE_1] } });
 
-      expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
-      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual({ abcd: ['node1'] });
+      await userEvent.click(screen.getByRole('button', { name: `Remove ${DANCE_LABEL}` }));
+
+      expect(lastInput(emitted)).toEqual({});
     });
-    it('when user unchecks an item, that is emitted to the parent component', () => {
-      const wrapper = makeWrapper();
-      const item = 'defj';
-      wrapper.vm.$emit = jest.fn();
-      wrapper.vm.remove(item);
-
-      expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
-      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual({});
+
+    it('emits an empty object when the selection is cleared', async () => {
+      const { emitted } = renderComponent({ value: { [DANCE]: [NODE_1] } });
+
+      await userEvent.click(screen.getByRole('button', { name: 'Clear all' }));
+
+      expect(lastInput(emitted)).toEqual({});
+    });
+
+    it('renders the flat checkbox list instead of KMultiSelect in expanded mode', () => {
+      renderComponent({ expanded: true });
+
+      expect(screen.queryByRole('button', { name: 'Open menu' })).not.toBeInTheDocument();
+      expect(screen.getAllByRole('checkbox').length).toBeGreaterThan(0);
     });
   });
 
-  describe('close button on chip interactions', () => {
-    it('in the autocomplete bar, the chip is removed when user clicks on its close button', async () => {
-      const wrapper = makeWrapper({
-        value: {
-          'remove me': ['node1'],
-          'keep me': ['node1'],
-        },
+  describe('expanded mode', () => {
+    it('emits the added category applied to all edited nodes when checked', async () => {
+      const { emitted } = renderComponent({ expanded: true, nodeIds: [NODE_1] });
+
+      await userEvent.click(screen.getByRole('checkbox', { name: DANCE_LABEL }));
+
+      expect(lastInput(emitted)).toEqual({ [DANCE]: [NODE_1] });
+    });
+
+    it('removes a category and its stored descendants when unchecked', async () => {
+      const { emitted } = renderComponent({
+        expanded: true,
+        value: { [ARTS]: [NODE_1], [DANCE]: [NODE_1] },
+        nodeIds: [NODE_1],
       });
-      const originalChipsLength = Object.keys(wrapper.vm.selected).length;
-      wrapper.vm.remove('remove me');
 
-      expect(wrapper.emitted().input.length).toEqual(originalChipsLength - 1);
+      await userEvent.click(screen.getByRole('checkbox', { name: ARTS_LABEL }));
+
+      expect(lastInput(emitted)).toEqual({});
     });
   });
 });

From 11094aecca5b071ebe225a1005b0892f70916ce9 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 18 Aug 2026 22:09:56 +0530
Subject: [PATCH 3/5] Move shared KMultiSelect strings to commonStrings

---
 .../frontend/shared/strings/commonStrings.js  | 40 +++++++++++++
 .../contentNodeFields/CategoryOptions.vue     | 58 ++++++++++++-------
 2 files changed, 78 insertions(+), 20 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js b/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
index 2399fc6be9..806288ddc9 100644
--- a/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
@@ -46,4 +46,44 @@ export const commonStrings = createTranslator('CommonStrings', {
     message: 'Options',
     context: 'Tooltip for the generic options menu icon',
   },
+  clearAllAction: {
+    message: 'Clear all',
+    context: 'Accessible label for the button that clears every selection in a select field',
+  },
+  openMenuAction: {
+    message: 'Open menu',
+    context: 'Accessible label for the button that opens a dropdown menu',
+  },
+  closeMenuAction: {
+    message: 'Close menu',
+    context: 'Accessible label for the button that closes a dropdown menu',
+  },
+  optionsClickableLabel: {
+    message: 'Options are clickable',
+    context: 'Announced to screen reader users when a list of selectable options appears',
+  },
+  allOptionsSelectedLabel: {
+    message: 'All options selected',
+    context: 'Announced when every option in a list is selected',
+  },
+  allOptionsDeselectedLabel: {
+    message: 'No options selected',
+    context: 'Announced when no options in a list are selected',
+  },
+  optionDeselectedLabel: {
+    message: 'Option deselected',
+    context: 'Announced when an option is removed from the selection',
+  },
+  partiallySelectedLabel: {
+    message: 'Partially selected',
+    context: 'Announced for an option when only some of the options under it are selected',
+  },
+  optionSelectedLabel: {
+    message: 'Selected {label}',
+    context: 'Announced when an option is selected. {label} is the name of the option',
+  },
+  optionRemovedLabel: {
+    message: 'Removed {label}',
+    context: 'Announced when an option is removed. {label} is the name of the option',
+  },
 });
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
index f5913a5a8c..68792e5a59 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
@@ -138,6 +138,7 @@
   import KMultiSelect from 'kolibri-design-system/lib/candidate/multiselect/KMultiSelect';
   import KChip from 'kolibri-design-system/lib/candidate/multiselect/KChip';
   import { getSortedCategories } from 'shared/utils/helpers';
+  import { commonStrings } from 'shared/strings/commonStrings';
   import DropdownWrapper from 'shared/views/form/DropdownWrapper';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
 
@@ -145,6 +146,33 @@
     name: 'CategoryOptions',
     components: { KMultiSelect, KChip, DropdownWrapper },
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
+    setup() {
+      const {
+        clearAllAction$,
+        openMenuAction$,
+        closeMenuAction$,
+        optionsClickableLabel$,
+        allOptionsSelectedLabel$,
+        allOptionsDeselectedLabel$,
+        optionDeselectedLabel$,
+        partiallySelectedLabel$,
+        optionSelectedLabel$,
+        optionRemovedLabel$,
+      } = commonStrings;
+
+      return {
+        clearAllAction$,
+        openMenuAction$,
+        closeMenuAction$,
+        optionsClickableLabel$,
+        allOptionsSelectedLabel$,
+        allOptionsDeselectedLabel$,
+        optionDeselectedLabel$,
+        partiallySelectedLabel$,
+        optionSelectedLabel$,
+        optionRemovedLabel$,
+      };
+    },
     props: {
       /**
        * This prop receives an object with the following structure:
@@ -212,17 +240,17 @@
       },
       messages() {
         return {
-          clearText: () => this.$tr('clearText'),
-          open: () => this.$tr('openMenu'),
-          close: () => this.$tr('closeMenu'),
-          clickable: () => this.$tr('optionsClickable'),
-          allOptionsSelected: () => this.$tr('allOptionsSelected'),
-          allOptionsDeselected: () => this.$tr('allOptionsDeselected'),
-          optionDeselected: () => this.$tr('optionDeselected'),
-          partiallySelected: () => this.$tr('partiallySelected'),
+          clearText: this.clearAllAction$,
+          open: this.openMenuAction$,
+          close: this.closeMenuAction$,
+          clickable: this.optionsClickableLabel$,
+          allOptionsSelected: this.allOptionsSelectedLabel$,
+          allOptionsDeselected: this.allOptionsDeselectedLabel$,
+          optionDeselected: this.optionDeselectedLabel$,
+          partiallySelected: this.partiallySelectedLabel$,
           itemsSelected: ({ count }) => this.$tr('itemsSelected', { count }),
-          selected: ({ label }) => this.$tr('categorySelected', { label }),
-          removed: ({ label }) => this.$tr('categoryRemoved', { label }),
+          selected: this.optionSelectedLabel$,
+          removed: this.optionRemovedLabel$,
           cleared: () => this.$tr('allCategoriesCleared'),
         };
       },
@@ -339,17 +367,7 @@
     },
     $trs: {
       noCategoryFoundText: 'Category not found',
-      clearText: 'Clear all',
-      openMenu: 'Open menu',
-      closeMenu: 'Close menu',
-      optionsClickable: 'Options are clickable',
-      allOptionsSelected: 'All options selected',
-      allOptionsDeselected: 'No options selected',
-      optionDeselected: 'Option deselected',
-      partiallySelected: 'Partially selected',
       itemsSelected: '{count, plural, one {# category selected} other {# categories selected}}',
-      categorySelected: 'Selected {label}',
-      categoryRemoved: 'Removed {label}',
       allCategoriesCleared: 'All categories cleared',
     },
   };

From dcaabe2001c72d616d71c4bad556a54b46ba1344 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 19 Aug 2026 23:25:44 +0530
Subject: [PATCH 4/5] done the changes asked in the review

---
 .../frontend/shared/strings/commonStrings.js  |   4 -
 .../strings/communityChannelsStrings.js       |   1 +
 .../contentNodeFields/CategoryOptions.vue     | 112 +++++-------------
 .../__tests__/categoryOptions.spec.js         |  66 +++++++----
 4 files changed, 73 insertions(+), 110 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js b/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
index 806288ddc9..0a1fb9161b 100644
--- a/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
@@ -46,10 +46,6 @@ export const commonStrings = createTranslator('CommonStrings', {
     message: 'Options',
     context: 'Tooltip for the generic options menu icon',
   },
-  clearAllAction: {
-    message: 'Clear all',
-    context: 'Accessible label for the button that clears every selection in a select field',
-  },
   openMenuAction: {
     message: 'Open menu',
     context: 'Accessible label for the button that opens a dropdown menu',
diff --git a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
index d4a76f4df2..8377e11f7a 100644
--- a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
@@ -445,6 +445,7 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
     message: 'New',
     context: 'Label indicating the section for new notifications',
   },
+  // TODO: clearAllAction should be moved to commonStrings.js in next major Studio release
   clearAllAction: {
     message: 'Clear all',
     context: 'Action button to clear all notifications',
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
index 68792e5a59..95254813f0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
@@ -8,7 +8,6 @@
       itemValue="value"
       itemText="text"
       :label="translateMetadataString('category')"
-      :multiple="true"
       :autoPromoteParent="false"
       clearable
       :noResultsText="$tr('noCategoryFoundText')"
@@ -19,8 +18,10 @@
         <span :ref="'category-chip-' + option.value">
           <KChip
             :text="option.text"
+            :removeLabel="$tr('removeCategory', { label: tooltipText(option.value) })"
             close
             @close="removeChip"
+            @mousedown.native.prevent
           />
         </span>
         <KTooltip
@@ -75,34 +76,6 @@
               </div>
             </VTooltip>
           </template>
-
-          <template #no-data>
-            <VListTile v-if="categoryText && categoryText.trim()">
-              <VListTileContent>
-                <VListTileTitle>
-                  {{ $tr('noCategoryFoundText', { text: categoryText.trim() }) }}
-                </VListTileTitle>
-              </VListTileContent>
-            </VListTile>
-          </template>
-
-          <template #item="{ item }">
-            <VListTile
-              :value="isSelected(item.value)"
-              :class="{ parentOption: !item.value.includes('.') }"
-              @mousedown.prevent
-              @click="onChange(item.value)"
-            >
-              <KCheckbox
-                :checked="isSelected(item.value)"
-                :label="item.text"
-                :value="item.value"
-                style="margin-top: 10px"
-                :style="treeItemStyle(item)"
-                :ripple="false"
-              />
-            </VListTile>
-          </template>
         </VAutocomplete>
       </template>
     </DropdownWrapper>
@@ -139,6 +112,7 @@
   import KChip from 'kolibri-design-system/lib/candidate/multiselect/KChip';
   import { getSortedCategories } from 'shared/utils/helpers';
   import { commonStrings } from 'shared/strings/commonStrings';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
   import DropdownWrapper from 'shared/views/form/DropdownWrapper';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
 
@@ -146,33 +120,6 @@
     name: 'CategoryOptions',
     components: { KMultiSelect, KChip, DropdownWrapper },
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
-    setup() {
-      const {
-        clearAllAction$,
-        openMenuAction$,
-        closeMenuAction$,
-        optionsClickableLabel$,
-        allOptionsSelectedLabel$,
-        allOptionsDeselectedLabel$,
-        optionDeselectedLabel$,
-        partiallySelectedLabel$,
-        optionSelectedLabel$,
-        optionRemovedLabel$,
-      } = commonStrings;
-
-      return {
-        clearAllAction$,
-        openMenuAction$,
-        closeMenuAction$,
-        optionsClickableLabel$,
-        allOptionsSelectedLabel$,
-        allOptionsDeselectedLabel$,
-        optionDeselectedLabel$,
-        partiallySelectedLabel$,
-        optionSelectedLabel$,
-        optionRemovedLabel$,
-      };
-    },
     props: {
       /**
        * This prop receives an object with the following structure:
@@ -239,18 +186,30 @@
         );
       },
       messages() {
+        const {
+          openMenuAction$,
+          closeMenuAction$,
+          optionsClickableLabel$,
+          allOptionsSelectedLabel$,
+          allOptionsDeselectedLabel$,
+          optionDeselectedLabel$,
+          partiallySelectedLabel$,
+          optionSelectedLabel$,
+          optionRemovedLabel$,
+        } = commonStrings;
+        const { clearAllAction$ } = communityChannelsStrings;
         return {
-          clearText: this.clearAllAction$,
-          open: this.openMenuAction$,
-          close: this.closeMenuAction$,
-          clickable: this.optionsClickableLabel$,
-          allOptionsSelected: this.allOptionsSelectedLabel$,
-          allOptionsDeselected: this.allOptionsDeselectedLabel$,
-          optionDeselected: this.optionDeselectedLabel$,
-          partiallySelected: this.partiallySelectedLabel$,
+          clearText: clearAllAction$,
+          open: openMenuAction$,
+          close: closeMenuAction$,
+          clickable: optionsClickableLabel$,
+          allOptionsSelected: allOptionsSelectedLabel$,
+          allOptionsDeselected: allOptionsDeselectedLabel$,
+          optionDeselected: optionDeselectedLabel$,
+          partiallySelected: partiallySelectedLabel$,
           itemsSelected: ({ count }) => this.$tr('itemsSelected', { count }),
-          selected: this.optionSelectedLabel$,
-          removed: this.optionRemovedLabel$,
+          selected: optionSelectedLabel$,
+          removed: optionRemovedLabel$,
           cleared: () => this.$tr('allCategoriesCleared'),
         };
       },
@@ -278,20 +237,10 @@
       removeAll() {
         this.selected = {};
       },
-      // Rebuilds the { category: [nodeIds] } object from KMultiSelect's flat
-      // array. Categories not applied to every edited node are invisible to
-      // KMultiSelect (see autocompleteValues), so they are carried over untouched.
+      // Dropdown mode is only rendered when a single node is edited, so every
+      // selected category simply applies to all of nodeIds.
       onKMultiSelectInput(newValues) {
-        const newSelected = {};
-        Object.entries(this.selected).forEach(([category, ids]) => {
-          if (ids.length !== this.nodeIds.length) {
-            newSelected[category] = ids;
-          }
-        });
-        newValues.forEach(value => {
-          newSelected[value] = this.nodeIds;
-        });
-        this.selected = newSelected;
+        this.selected = Object.fromEntries(newValues.map(value => [value, this.nodeIds]));
       },
       tooltipText(optionId) {
         const option = this.categoriesList.find(option => option.value === optionId);
@@ -369,6 +318,7 @@
       noCategoryFoundText: 'Category not found',
       itemsSelected: '{count, plural, one {# category selected} other {# categories selected}}',
       allCategoriesCleared: 'All categories cleared',
+      removeCategory: 'Remove {label}',
     },
   };
 
@@ -377,10 +327,6 @@
 
 <style lang="scss" scoped>
 
-  .parentOption:not(:first-child) {
-    border-top: 1px solid rgba(0, 0, 0, 0.12);
-  }
-
   .checkbox-list-wrapper {
     height: 250px;
     overflow-y: auto;
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
index e51013557c..8a6ecb7a4a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
@@ -2,17 +2,25 @@ import { render, screen, within } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import VueRouter from 'vue-router';
 import CategoryOptions from '../CategoryOptions.vue';
+import { commonStrings } from 'shared/strings/commonStrings';
+import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+import { metadataTranslationMixin } from 'shared/mixins';
+
+const { translateMetadataString } = metadataTranslationMixin.methods;
+const { openMenuAction$ } = commonStrings;
+const { clearAllAction$ } = communityChannelsStrings;
 
 const SCHOOL = 'd&WXdXWF';
 const ARTS = 'd&WXdXWF.5QAjgfv7';
 const DANCE = 'd&WXdXWF.5QAjgfv7.BUMJJBnS';
 const MUSIC = 'd&WXdXWF.5QAjgfv7.u0aKjT4i';
 
-const SCHOOL_LABEL = 'School';
-const ARTS_LABEL = 'Arts';
-const DANCE_LABEL = 'Dance';
-const MUSIC_LABEL = 'Music';
-const DANCE_PATH = 'School - Arts - Dance';
+const SCHOOL_LABEL = translateMetadataString('school');
+const ARTS_LABEL = translateMetadataString('arts');
+const DANCE_LABEL = translateMetadataString('dance');
+const MUSIC_LABEL = translateMetadataString('music');
+const DANCE_PATH = `${SCHOOL_LABEL} - ${ARTS_LABEL} - ${DANCE_LABEL}`;
+const ARTS_PATH = `${SCHOOL_LABEL} - ${ARTS_LABEL}`;
 
 const NODE_1 = 'node1';
 const NODE_2 = 'node2';
@@ -32,7 +40,7 @@ function lastInput(emitted) {
 describe('CategoryOptions', () => {
   it('renders the category field', () => {
     renderComponent();
-    expect(screen.getByText('Category')).toBeInTheDocument();
+    expect(screen.getByText(translateMetadataString('category'))).toBeInTheDocument();
   });
 
   describe('dropdown mode (KMultiSelect)', () => {
@@ -46,6 +54,7 @@ describe('CategoryOptions', () => {
       });
 
       // The closed dropdown stays in the DOM (v-show), so queries must not look inside it.
+      // getAllByText because KChip nests two elements that both carry the chip text.
       const chipsArea = within(screen.getByRole('group'));
       expect(chipsArea.getAllByText(DANCE_LABEL).length).toBeGreaterThan(0);
       expect(chipsArea.queryByText(MUSIC_LABEL)).not.toBeInTheDocument();
@@ -67,35 +76,46 @@ describe('CategoryOptions', () => {
     });
 
     it('emits the selection as an object applying each category to all edited nodes', async () => {
-      const { emitted } = renderComponent({ nodeIds: [NODE_1, NODE_2] });
+      const { emitted } = renderComponent();
 
       await userEvent.click(screen.getByRole('combobox'));
       await userEvent.click(await screen.findByRole('option', { name: SCHOOL_LABEL }));
 
       expect(lastInput(emitted)).toEqual({
-        [SCHOOL]: [NODE_1, NODE_2],
+        [SCHOOL]: [NODE_1],
       });
     });
 
-    it('preserves partially applied categories when the selection changes', async () => {
-      const { emitted } = renderComponent({
-        value: { [MUSIC]: [NODE_1] },
-        nodeIds: [NODE_1, NODE_2],
-      });
+    it('adds only the parent when a partially selected parent is clicked', async () => {
+      const { emitted } = renderComponent({ value: { [DANCE]: [NODE_1] } });
 
       await userEvent.click(screen.getByRole('combobox'));
-      await userEvent.click(await screen.findByRole('option', { name: SCHOOL_LABEL }));
+      // An indeterminate option's accessible name includes the hidden
+      // "partially selected" text, so match on how the name starts.
+      await userEvent.click(
+        await screen.findByRole('option', { name: name => name.startsWith(SCHOOL_LABEL) }),
+      );
 
       expect(lastInput(emitted)).toEqual({
-        [MUSIC]: [NODE_1],
-        [SCHOOL]: [NODE_1, NODE_2],
+        [DANCE]: [NODE_1],
+        [SCHOOL]: [NODE_1],
       });
     });
 
     it('removes a category when its chip close button is clicked', async () => {
       const { emitted } = renderComponent({ value: { [DANCE]: [NODE_1] } });
 
-      await userEvent.click(screen.getByRole('button', { name: `Remove ${DANCE_LABEL}` }));
+      await userEvent.click(screen.getByRole('button', { name: `Remove ${DANCE_PATH}` }));
+
+      expect(lastInput(emitted)).toEqual({});
+    });
+
+    it('removes stored descendants when a parent chip is removed', async () => {
+      const { emitted } = renderComponent({
+        value: { [ARTS]: [NODE_1], [DANCE]: [NODE_1] },
+      });
+
+      await userEvent.click(screen.getByRole('button', { name: `Remove ${ARTS_PATH}` }));
 
       expect(lastInput(emitted)).toEqual({});
     });
@@ -103,20 +123,20 @@ describe('CategoryOptions', () => {
     it('emits an empty object when the selection is cleared', async () => {
       const { emitted } = renderComponent({ value: { [DANCE]: [NODE_1] } });
 
-      await userEvent.click(screen.getByRole('button', { name: 'Clear all' }));
+      await userEvent.click(screen.getByRole('button', { name: clearAllAction$() }));
 
       expect(lastInput(emitted)).toEqual({});
     });
+  });
 
-    it('renders the flat checkbox list instead of KMultiSelect in expanded mode', () => {
+  describe('expanded mode', () => {
+    it('renders the flat checkbox list instead of KMultiSelect', () => {
       renderComponent({ expanded: true });
 
-      expect(screen.queryByRole('button', { name: 'Open menu' })).not.toBeInTheDocument();
-      expect(screen.getAllByRole('checkbox').length).toBeGreaterThan(0);
+      expect(screen.queryByRole('button', { name: openMenuAction$() })).not.toBeInTheDocument();
+      expect(screen.getByRole('checkbox', { name: DANCE_LABEL })).toBeInTheDocument();
     });
-  });
 
-  describe('expanded mode', () => {
     it('emits the added category applied to all edited nodes when checked', async () => {
       const { emitted } = renderComponent({ expanded: true, nodeIds: [NODE_1] });
 

From 1f967084ebaeada4b66f8ead5aaaa06828bf146f Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 20 Aug 2026 02:11:32 +0530
Subject: [PATCH 5/5] updated

---
 .../__tests__/categoryOptions.spec.js                  | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
index 8a6ecb7a4a..f0f0fc0f37 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
@@ -4,11 +4,13 @@ import VueRouter from 'vue-router';
 import CategoryOptions from '../CategoryOptions.vue';
 import { commonStrings } from 'shared/strings/commonStrings';
 import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+import { createTranslator } from 'shared/i18n';
 import { metadataTranslationMixin } from 'shared/mixins';
 
 const { translateMetadataString } = metadataTranslationMixin.methods;
 const { openMenuAction$ } = commonStrings;
 const { clearAllAction$ } = communityChannelsStrings;
+const { removeCategory$ } = createTranslator('CategoryOptions', CategoryOptions.$trs);
 
 const SCHOOL = 'd&WXdXWF';
 const ARTS = 'd&WXdXWF.5QAjgfv7';
@@ -105,7 +107,9 @@ describe('CategoryOptions', () => {
     it('removes a category when its chip close button is clicked', async () => {
       const { emitted } = renderComponent({ value: { [DANCE]: [NODE_1] } });
 
-      await userEvent.click(screen.getByRole('button', { name: `Remove ${DANCE_PATH}` }));
+      await userEvent.click(
+        screen.getByRole('button', { name: removeCategory$({ label: DANCE_PATH }) }),
+      );
 
       expect(lastInput(emitted)).toEqual({});
     });
@@ -115,7 +119,9 @@ describe('CategoryOptions', () => {
         value: { [ARTS]: [NODE_1], [DANCE]: [NODE_1] },
       });
 
-      await userEvent.click(screen.getByRole('button', { name: `Remove ${ARTS_PATH}` }));
+      await userEvent.click(
+        screen.getByRole('button', { name: removeCategory$({ label: ARTS_PATH }) }),
+      );
 
       expect(lastInput(emitted)).toEqual({});
     });