Migrate CategoryOptions dropdown to KMultiSelect

[Prashant-thakur77]

Summary

Migrates the CategoryOptions dropdown from Vuetify's VAutocomplete to KDS KMultiSelect, as part of moving Studio off Vuetify. This is the Category field in a resource's Edit details panel.

The expanded mode used by the bulk edit modal is intentionally left on VAutocomplete it needs an inline mode and externally controlled indeterminate values from KMultiSelect, which don't exist yet.

Partof: learningequality/kolibri-design-system#1259

Notable points:

• Two intentional display changes: a parent with one selected child now shows indeterminate instead of checked (it was never in the saved data), so clicking it now adds just that parent instead of clearing the whole branch.
• Search is unchanged (label matching only), matching the old field.
• onKMultiSelectInput converts KMultiSelect's flat array back to { categoryId: [nodeIds] } and preserves partially applied categories. Partials can't occur today (single node only): this is forward-compatibility for the expanded-mode migration.
• Tests rewritten with Vue Testing Library, covering this component's bridging logic without duplicating KDS's own KMultiSelect coverage.

References

• KDS component PR: Implement the KMultiSelect wrapper and Dropdown components for KMultiSelect kolibri-design-system#1296

Screencast.From.2026-08-17.02-11-04.mp4

Expanded Mode:

Screencast.From.2026-08-17.02-20-34.mp4

Reviewer guidance

All tests are covered and there are no regressions.

AI usage

I used Claude to generate this discription and done changes as needed

[learning-equality-bot]

👋 Hi @Prashant-thakur77, thanks for contributing!

For the review process to begin, please verify that the following is satisfied:

• Contribution is aligned with our contributing guidelines

• Pull request description has correctly filled AI usage section & follows our AI guidance:

  AI guidance

  
  

  State explicitly whether you didn't use or used AI & how.

  If you used it, ensure that the PR is aligned with Using AI as well as our DEEP framework. DEEP asks you:

  • Disclose — Be open about when you've used AI for support.
  • Engage critically — Question what is generated. Review code for correctness and unnecessary complexity.
  • Edit — Review and refine AI output. Remove unnecessary code and verify it still works after your edits.
  • Process sharing — Explain how you used the AI so others can learn.

  
  

  Examples of good disclosures:

  "I used Claude Code to implement the component, prompting it to follow the pattern in ComponentX. I reviewed the generated code, removed unnecessary error handling, and verified the tests pass."

  "I brainstormed the approach with Gemini, then had it write failing tests for the feature. After reviewing the tests, I used Claude Code to generate the implementation. I refactored the output to reduce verbosity and ran the full test suite."

Also check that issue requirements are satisfied & you ran pre-commit locally.

Pull requests that don't follow the guidelines will be closed.

Reviewer assignment can take up to 2 weeks.

[Prashant-thakur77]

@LianaHarris360 I’ve created the PR for the hierarchical use of KMultiSelect in CategoryOptions
Please take a look when you have time:)

[LianaHarris360]

Most of these strings are general and will be reused for the KMultiSelect, perhaps the strings that we know will be reused should be moved to contentcuration/contentcuration/frontend/shared/strings/commonStrings.js?

[Prashant-thakur77]

Good idea, done, the general ones are in commonStrings.js now:)