refactor: cleanup

- use unique ids - remove position style override as it's not needed for the reparented/portalled approach
elastic · Sep 12, 2024 · 9e23fdd · 9e23fdd
1 parent 517cf26
commit 9e23fdd
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx
@@ -309,17 +309,17 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
           {/* keep the resizer outside of Draggable to ensure both are working independently */}
           {columnResizer}
           <EuiDraggable
-            key={`draggable-${id}`}
+            key={id}
             draggableId={id}
             className="euiDataGridHeaderDraggable"
             index={index}
             customDragHandle="custom"
             // override internal styling from @hello-pangea/dnd
-            css={{ display: 'flex', top: '0 !important' }}
+            css={{ display: 'flex', inlineSize: '100%' }}
           >
             {({ draggableProps, dragHandleProps }, { isDragging }) => {
               const {
-                role,
+                role, // extracting role to not pass it along
                 'aria-describedby': ariaDescribedby,
                 ...restDragHandleProps
               } = dragHandleProps ?? {};
@@ -334,7 +334,6 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
 
               const content = (
                 <EuiDataGridHeaderCellWrapper
-                  key={id}
                   isDragging={isDragging}
                   onBlur={handleOnBlur}
                   onMouseDown={handleOnMouseDown}

diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_row.tsx b/packages/eui/src/components/datagrid/body/header/data_grid_header_row.tsx
@@ -9,6 +9,8 @@
 import classnames from 'classnames';
 import React, { forwardRef, memo, useContext, useMemo } from 'react';
 import { OnDragEndResponder } from '@hello-pangea/dnd';
+
+import { useGeneratedHtmlId } from '../../../../services';
 import { EuiDragDropContext, EuiDroppable } from '../../../drag_and_drop';
 import { DataGridFocusContext } from '../../utils/focus';
 import {
@@ -41,11 +43,19 @@ const EuiDataGridHeaderRow = memo(
     const classes = classnames('euiDataGridHeader', className);
     const dataTestSubj = classnames('dataGridHeader', _dataTestSubj);
 
+    const droppableId = useGeneratedHtmlId({
+      prefix: 'euiDataGridHeaderDroppable',
+    });
+
     const { setFocusedCell } = useContext(DataGridFocusContext);
 
     const handleOnDragEnd: OnDragEndResponder = ({ source, destination }) => {
       if (!source || !destination) return;
 
+      if (destination.index === source.index) {
+        return;
+      }
+
       const indexOffset = leadingControlColumns?.length ?? 0;
       const sourceColumn = columns[source.index - indexOffset];
       const destinationColumn = columns[destination.index - indexOffset];
@@ -112,7 +122,8 @@ const EuiDataGridHeaderRow = memo(
         {columnDragDrop ? (
           <EuiDragDropContext onDragEnd={handleOnDragEnd}>
             <EuiDroppable
-              droppableId="euiDataGridHeaderDroppable"
+              key={droppableId}
+              droppableId={droppableId}
               direction="horizontal"
               className="euiDataGridHeaderDroppable"
               data-test-subj="euiDataGridHeaderDroppable"