diff --git a/app/assets/javascripts/discourse/components/group-index-toggle.js.es6 b/app/assets/javascripts/discourse/components/group-index-toggle.js.es6
index 247b7e1829f..f84b9b3d21d 100644
--- a/app/assets/javascripts/discourse/components/group-index-toggle.js.es6
+++ b/app/assets/javascripts/discourse/components/group-index-toggle.js.es6
@@ -1,29 +1,30 @@
import Component from "@ember/component";
import { iconHTML } from "discourse-common/lib/icon-library";
-import { bufferedRender } from "discourse-common/lib/buffered-render";
-export default Component.extend(
- bufferedRender({
- tagName: "th",
- classNames: ["sortable"],
- rerenderTriggers: ["order", "desc"],
-
- buildBuffer(buffer) {
- buffer.push("");
- },
-
- click() {
- if (this.order === this.field) {
- this.set("desc", this.desc ? null : true);
- } else {
- this.setProperties({ order: this.field, desc: null });
- }
+export default Component.extend({
+ tagName: "th",
+ classNames: ["sortable"],
+ chevronIcon: null,
+ toggleProperties() {
+ if (this.order === this.field) {
+ this.set("desc", this.desc ? null : true);
+ } else {
+ this.setProperties({ order: this.field, desc: null });
}
- })
-);
+ },
+ toggleChevron() {
+ if (this.order === this.field) {
+ let chevron = iconHTML(this.desc ? "chevron-down" : "chevron-up");
+ this.set("chevronIcon", `${chevron}`.htmlSafe());
+ } else {
+ this.set("chevronIcon", null);
+ }
+ },
+ click() {
+ this.toggleProperties();
+ },
+ didReceiveAttrs() {
+ this._super(...arguments);
+ this.toggleChevron();
+ }
+});
diff --git a/app/assets/javascripts/discourse/templates/components/group-index-toggle.hbs b/app/assets/javascripts/discourse/templates/components/group-index-toggle.hbs
new file mode 100644
index 00000000000..7ea697404f6
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/group-index-toggle.hbs
@@ -0,0 +1 @@
+