Fix #2836 by changing resize logic in rtl mode (#2843)

microsoft · Oct 22, 2024 · 353df98 · 353df98
1 parent b53390a
commit 353df98
Showing 1 changed file with 20 additions and 6 deletions.
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.js b/src/Core/Components/DataGrid/FluentDataGrid.razor.js
@@ -174,11 +174,21 @@ export function enableColumnResizing(gridElement) {
                 return;
             }
 
-            const gridLeft = gridElement.getBoundingClientRect().left;
-            const headerLocalLeft = headerBeingResized.getBoundingClientRect().left - gridLeft;
-            const pointerLocalLeft = e.clientX - gridLeft;
-
-            const width = pointerLocalLeft - headerLocalLeft;
+            let gridEdge;
+            let headerLocalEdge;
+            let pointerLocalEdge;
+
+            if (document.body.dir === '' || document.body.dir === 'ltr') {
+                gridEdge = gridElement.getBoundingClientRect().left;
+                headerLocalEdge = headerBeingResized.getBoundingClientRect().left - gridEdge;
+                pointerLocalEdge = e.clientX - gridEdge;
+            }
+            else {
+                gridEdge = gridElement.getBoundingClientRect().right;
+                headerLocalEdge = gridEdge - headerBeingResized.getBoundingClientRect().right;
+                pointerLocalEdge = gridEdge - e.clientX;
+            }
+            const width = pointerLocalEdge - headerLocalEdge;
 
             const column = columns.find(({ header }) => header === headerBeingResized);
             min = header.querySelector('.col-options-button') ? 100 : 75;
@@ -201,9 +211,13 @@ export function enableColumnResizing(gridElement) {
                 .join(' ');
         });
 
-        const onPointerUp = () => {
+        const onPointerUp = (e) => {
             headerBeingResized = undefined;
             resizeHandle = undefined;
+
+            if (e.target.hasPointerCapture(e.pointerId)) {
+                e.target.releasePointerCapture(e.pointerId);
+            }
         };
 
         const initResize = ({ target, pointerId }) => {