WebUI: Fix keyboard navigation when using virtual rendering

Author: Piccirello

src/webui/www/private/scripts/dynamicTable.js

@@ -963,6 +963,7 @@ window.qBittorrent.DynamicTable ??= (() => {
                     element = this.cachedElements[position] = this.createRowElement(row, offset);
                 elements.push(element);
             }
+            const hadFocus = this.dynamicTableDiv.contains(document.activeElement);
             this.tableBody.replaceChildren(...elements);
 
             // update row classes
@@ -971,6 +972,10 @@ window.qBittorrent.DynamicTable ??= (() => {
             // update visible rows
             for (const row of this.tableBody.children)
                 this.updateRow(row, true);
+
+            // restore focus so keyboard navigation continues working
+            if (hadFocus)
+                this.getTrByRowId(this.getSelectedRowId())?.focus({ preventScroll: true });
         }
 
         createRowElement(row, top = -1) {
@@ -1082,6 +1087,7 @@ window.qBittorrent.DynamicTable ??= (() => {
                 this.deselectAll();
                 const newRow = visibleRows[selectedIndex + 1];
                 this.selectRow(newRow.getAttribute("data-row-id"));
+                newRow.focus({ preventScroll: true });
             }
         }
 
@@ -1096,6 +1102,7 @@ window.qBittorrent.DynamicTable ??= (() => {
                 this.deselectAll();
                 const newRow = visibleRows[selectedIndex - 1];
                 this.selectRow(newRow.getAttribute("data-row-id"));
+                newRow.focus({ preventScroll: true });
             }
         }
     }
@@ -2441,17 +2448,23 @@ window.qBittorrent.DynamicTable ??= (() => {
                 return;
 
             const node = this.getNode(id);
-            if (node.isFolder)
+            if (node.isFolder) {
                 this.expandNode(node.rowId);
+                if (this.useVirtualList)
+                    this.rerender();
+            }
         }
 
         collapseFolder(id) {
             if (!this.supportCollapsing)
                 return;
 
             const node = this.getNode(id);
-            if (node.isFolder)
+            if (node.isFolder) {
                 this.collapseNode(node.rowId);
+                if (this.useVirtualList)
+                    this.rerender();
+            }
         }
 
         isAllCheckboxesChecked() {