From 6c23d5966d22f1d20aecc4f37c3ee1b2eb176c1f Mon Sep 17 00:00:00 2001
From: Vivian Leung <vivz753@gmail.com>
Date: Thu, 19 Jun 2025 12:09:37 +0200
Subject: [PATCH] Tasks Table: Freeze sorting on Shift key down (#104388)

Listen to the key press of the Shift key on the Tasks list and disable
any table sorting until it is released.

Related to #104386. When a user is performing multi-select, they hold
the Shift key down and intend to click the next row which determines
which rows are selected. To avoid unintended selections, the UI should
not update or shift around in the middle of the user interaction.

Reviewed-on: https://projects.blender.org/studio/flamenco/pulls/104388
---
 web/app/src/components/jobs/TasksTable.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/web/app/src/components/jobs/TasksTable.vue b/web/app/src/components/jobs/TasksTable.vue
index 569dad11..a6b134d8 100644
--- a/web/app/src/components/jobs/TasksTable.vue
+++ b/web/app/src/components/jobs/TasksTable.vue
@@ -10,7 +10,11 @@
     </div>
   </div>
   <div>
-    <div class="task-list with-clickable-row" id="flamenco_task_list"></div>
+    <div
+      @keydown="disableSorting"
+      @keyup="enableSorting"
+      class="task-list with-clickable-row"
+      id="flamenco_task_list"></div>
   </div>
 </template>
 
@@ -40,6 +44,7 @@ export default {
       shownStatuses: [],
       availableStatuses: [], // Will be filled after data is loaded from the backend.
       lastSelectedTaskPosition: null,
+      sortable: true,
     };
   },
   mounted() {
@@ -131,6 +136,7 @@ export default {
       this.$router.push(route);
     },
     sortData() {
+      if (!this.sortable) return;
       const tab = this.tabulator;
       tab.setSort(tab.getSorters()); // This triggers re-sorting.
     },
@@ -192,6 +198,16 @@ export default {
         }
       );
     },
+    enableSorting(event) {
+      if (event.key === 'Shift') {
+        this.sortable = true;
+      }
+    },
+    disableSorting(event) {
+      if (event.key === 'Shift') {
+        this.sortable = false;
+      }
+    },
     processTaskUpdate(taskUpdate) {
       // Any updates to tasks i.e. status changes will need to reflect its changes to the rows on Tabulator here.
       // updateData() will only overwrite properties that are actually set on