From cc4bb7cc0dc1f3bbc5cebbc4c119f68e5e7107a6 Mon Sep 17 00:00:00 2001
From: Vincent Baaij <vnbaaij@outlook.com>
Date: Tue, 22 Oct 2024 10:55:34 +0200
Subject: [PATCH] Fix #2836 by changing resize logic in rtl mode

---
 .../DataGrid/FluentDataGrid.razor.js          | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.js b/src/Core/Components/DataGrid/FluentDataGrid.razor.js
index d6c3c6ead..d865375ab 100644
--- 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 }) => {