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

@@ -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