Users/vnbaaij/improve datagrid script

src/Core/Components/DataGrid/FluentDataGrid.razor.js

@@ -26,6 +26,20 @@ export function init(gridElement, autoFocus) {
             gridElement.dispatchEvent(new CustomEvent('closecolumnresize', { bubbles: true }));
         }
     };
+    const bodyKeyDownHandler = event => {
+        if (event.key === "Escape") {
+            const columnOptionsElement = gridElement?.querySelector('.col-options');
+            if (columnOptionsElement) {
+                gridElement.dispatchEvent(new CustomEvent('closecolumnoptions', { bubbles: true }));
+                gridElement.focus();
+            }
+            const columnResizeElement = gridElement?.querySelector('.col-resize');
+            if (columnResizeElement) {
+                gridElement.dispatchEvent(new CustomEvent('closecolumnresize', { bubbles: true }));
+                gridElement.focus();
+            }
+        }
+    };
     const keyboardNavigation = (sibling) => {
         if (sibling !== null) {
             start.focus();
@@ -35,24 +49,18 @@ export function init(gridElement, autoFocus) {
     }
     const keyDownHandler = event => {
         const columnOptionsElement = gridElement?.querySelector('.col-options');
-        if (columnOptionsElement && columnOptionsElement.contains(event.target)) {
+        if (columnOptionsElement) {
             if (event.key === "ArrowRight" || event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "ArrowUp") {
                 event.stopPropagation();
-            }
-            if (event.key === "Escape") {
-                gridElement.dispatchEvent(new CustomEvent('closecolumnoptions', { bubbles: true }));
-                gridElement.focus();
+                return;
             }
         }
 
         const columnResizeElement = gridElement?.querySelector('.col-resize');
-        if (columnResizeElement && columnResizeElement.contains(event.target)) {
+        if (columnResizeElement) {
             if (event.key === "ArrowRight" || event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "ArrowUp") {
                 event.stopPropagation();
-            }
-            if (event.key === "Escape") {
-                gridElement.dispatchEvent(new CustomEvent('closecolumnresize', { bubbles: true }));
-                gridElement.focus();
+                return;
             }
         }
 
@@ -123,6 +131,7 @@ export function init(gridElement, autoFocus) {
 
     document.body.addEventListener('click', bodyClickHandler, { signal });
     document.body.addEventListener('mousedown', bodyClickHandler, { signal }); // Otherwise it seems strange that it doesn't go away until you release the mouse button
+    document.body.addEventListener('keydown', bodyKeyDownHandler, { signal });
     gridElement.addEventListener('keydown', keyDownHandler, { signal });
 
     return {
@@ -131,6 +140,10 @@ export function init(gridElement, autoFocus) {
 
             const index = grids.findIndex(grid => grid.id === gridElement.id);
             if (index > -1) {
+                const grid = grids[index];
+                if (grid.resizeController) {
+                    grid.resizeController.abort();
+                }
                 grids.splice(index, 1);
             }
         }
@@ -167,6 +180,16 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true,
         return;
     }
 
+    const id = gridElement.id;
+    let grid = grids.find(g => g.id === id);
+
+    if (grid?.resizeController) {
+        grid.resizeController.abort();
+    }
+
+    const localController = new AbortController();
+    const effectiveSignal = signal ?? localController.signal;
+
     const isGrid = gridElement.classList.contains('grid')
 
     let tableHeight = gridElement.offsetHeight;
@@ -186,7 +209,7 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true,
     if (!resizeColumnOnAllRows) {
         // Only use the header height when resizeColumnOnAllRows is false
         // Use the first header's height if available
-        resizeHandleHeight = headers.length > 0 ? (headers[0].offsetHeight - 14 ): 32; // fallback to 32px if no headers
+        resizeHandleHeight = headers.length > 0 ? (headers[0].offsetHeight - 14) : 32; // fallback to 32px if no headers
     }
 
     headers.forEach((header) => {
@@ -196,7 +219,7 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true,
         });
 
         // remove any previously created divs
-        const resizedivs  = header.querySelectorAll(".actual-resize-handle");
+        const resizedivs = header.querySelectorAll(".actual-resize-handle");
         resizedivs.forEach(div => div.remove());
 
         // Get the top of the first resize-handle
@@ -205,7 +228,7 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true,
         // add a new resize div
         const div = createDiv(resizeHandleHeight, resizeTop);
         header.appendChild(div);
-        setListeners(div, signal);
+        setListeners(div, effectiveSignal);
     });
 
     let initialWidths;
@@ -219,13 +242,17 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true,
         }
     }
 
-    const id = gridElement.id;
-    if (!grids.find(grid => grid.id === id)) {
+    if (!grid) {
         grids.push({
             id,
             columns,
             initialWidths,
+            resizeController: signal ? undefined : localController,
         });
+    } else {
+        grid.columns = columns;
+        grid.initialWidths = initialWidths;
+        grid.resizeController = signal ? undefined : localController;
     }
 
     function setListeners(div, signal) {