From ba3d89b6747ffd56148ccb0c7f4b76a0892cf717 Mon Sep 17 00:00:00 2001
From: skomerko <168652295+skomerko@users.noreply.github.com>
Date: Sun, 23 Feb 2025 08:13:17 +0100
Subject: [PATCH] WebUI: Update sort icon after changing column order

This PR fixes a bug where the sort icon did not update correctly after reordering columns.

Steps to reproduce:
1. Sort a column
2. Move it to a different position
3. The sort icon remains in its original location

PR #22299.
---
 src/webui/www/private/scripts/dynamicTable.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/webui/www/private/scripts/dynamicTable.js b/src/webui/www/private/scripts/dynamicTable.js
index bd44bc5d1107..ab9772a9d85a 100644
--- a/src/webui/www/private/scripts/dynamicTable.js
+++ b/src/webui/www/private/scripts/dynamicTable.js
@@ -89,7 +89,6 @@ window.qBittorrent.DynamicTable ??= (() => {
             this.setupCommonEvents();
             this.setupHeaderEvents();
             this.setupHeaderMenu();
-            this.setSortedColumnIcon(this.sortedColumn, null, (this.reverseSort === "1"));
             this.setupAltRow();
         },
 
@@ -600,19 +599,21 @@ window.qBittorrent.DynamicTable ??= (() => {
         updateTableHeaders: function() {
             this.updateHeader(this.hiddenTableHeader);
             this.updateHeader(this.fixedTableHeader);
+            this.setSortedColumnIcon(this.sortedColumn, null, (this.reverseSort === "1"));
         },
 
         updateHeader: function(header) {
             const ths = this.getRowCells(header);
             for (let i = 0; i < ths.length; ++i) {
                 const th = ths[i];
-                th._this = this;
-                th.title = this.columns[i].caption;
-                th.textContent = this.columns[i].caption;
-                th.style.cssText = `width: ${this.columns[i].width}px; ${this.columns[i].style}`;
-                th.columnName = this.columns[i].name;
-                th.classList.add(`column_${th.columnName}`);
-                th.classList.toggle("invisible", ((this.columns[i].visible === "0") || this.columns[i].force_hide));
+                if (th.columnName !== this.columns[i].name) {
+                    th.title = this.columns[i].caption;
+                    th.textContent = this.columns[i].caption;
+                    th.style.cssText = `width: ${this.columns[i].width}px; ${this.columns[i].style}`;
+                    th.columnName = this.columns[i].name;
+                    th.className = `column_${th.columnName}`;
+                    th.classList.toggle("invisible", ((this.columns[i].visible === "0") || this.columns[i].force_hide));
+                }
             }
         },