diff --git a/app/assets/javascripts/admin/addon/components/site-settings/category-list.gjs b/app/assets/javascripts/admin/addon/components/site-settings/category-list.gjs index 7b0b15116f5..4c87947d21c 100644 --- a/app/assets/javascripts/admin/addon/components/site-settings/category-list.gjs +++ b/app/assets/javascripts/admin/addon/components/site-settings/category-list.gjs @@ -1,13 +1,37 @@ import Component from "@glimmer/component"; +import { tracked } from "@glimmer/tracking"; import { action } from "@ember/object"; +import didUpdate from "@ember/render-modifiers/modifiers/did-update"; import Category from "discourse/models/category"; import htmlSafe from "discourse-common/helpers/html-safe"; import SettingValidationMessage from "admin/components/setting-validation-message"; import CategorySelector from "select-kit/components/category-selector"; export default class CategoryList extends Component { - get selectedCategories() { - return Category.findByIds(this.args.value.split("|").filter(Boolean)); + @tracked selectedCategories = []; + + constructor() { + super(...arguments); + + this.pendingCategoriesRequest = Promise.resolve(); + this.valueChanged(); + } + + get categoryIds() { + return this.args.value + .split("|") + .map((x) => parseInt(x, 10)) + .filter(Boolean); + } + + async updateSelectedCategories() { + await this.pendingCategoriesRequest; + this.selectedCategories = await Category.asyncFindByIds(this.categoryIds); + } + + @action + valueChanged() { + this.pendingCategoriesRequest = this.updateSelectedCategories(); } @action @@ -16,12 +40,14 @@ export default class CategoryList extends Component { } }