Merge pull request #8673 from marmelab/fix-datagridconfigurable-order…

…ing-firefox Fix `DatagridConfigurable` column ordering feature does not work in Firefox
marmelab · Feb 23, 2023 · 6cc4c97 · 6cc4c97
2 parents 21a5426 + 1e11375
commit 6cc4c97
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/packages/ra-ui-materialui/src/preferences/FieldToggle.tsx b/packages/ra-ui-materialui/src/preferences/FieldToggle.tsx
@@ -11,18 +11,27 @@ export const FieldToggle = props => {
     const { selected, label, onToggle, onMove, source, index } = props;
     const resource = useResourceContext();
     const dropIndex = React.useRef<number>(null);
+    const x = React.useRef<number>(null);
+    const y = React.useRef<number>(null);
+
+    const handleDocumentDragOver = React.useCallback(event => {
+        x.current = event.clientX;
+        y.current = event.clientY;
+    }, []);
+
+    const handleDragStart = () => {
+        document.addEventListener('dragover', handleDocumentDragOver);
+    };
 
     const handleDrag = event => {
         // imperative DOM manipulations using the native Drag API
         const selectedItem = event.target;
         selectedItem.classList.add('drag-active');
         const list = selectedItem.parentNode;
-        const x = event.clientX;
-        const y = event.clientY;
         let dropItem =
-            document.elementFromPoint(x, y) === null
+            document.elementFromPoint(x.current, y.current) === null
                 ? selectedItem
-                : document.elementFromPoint(x, y);
+                : document.elementFromPoint(x.current, y.current);
         if (dropItem.classList.contains('dragIcon')) {
             dropItem = dropItem.parentNode;
         }
@@ -42,6 +51,7 @@ export const FieldToggle = props => {
         const selectedItem = event.target;
         onMove(selectedItem.dataset.index, dropIndex.current);
         selectedItem.classList.remove('drag-active');
+        document.removeEventListener('dragover', handleDocumentDragOver);
     };
 
     const handleDragOver = event => {
@@ -54,6 +64,7 @@ export const FieldToggle = props => {
             key={source}
             draggable={onMove ? 'true' : undefined}
             onDrag={onMove ? handleDrag : undefined}
+            onDragStart={onMove ? handleDragStart : undefined}
             onDragEnd={onMove ? handleDragEnd : undefined}
             onDragOver={onMove ? handleDragOver : undefined}
             data-index={index}