Fix drag preview in TableView (#5687)

The fix ensures that when rowHeader is not present, the drag preview displays the content of the first element, excluding checkboxes and dragButtons.

Author: ryo-manba

packages/@react-spectrum/table/stories/TableDnD.stories.tsx

@@ -14,7 +14,7 @@ import {action} from '@storybook/addon-actions';
 import {ComponentMeta} from '@storybook/react';
 import defaultConfig, {TableStory} from './Table.stories';
 import {Divider} from '@react-spectrum/divider';
-import {DragBetweenTablesExample, DragBetweenTablesRootOnlyExample, DragExample, DragOntoRowExample, ReorderExample} from './TableDnDExamples';
+import {DragBetweenTablesExample, DragBetweenTablesRootOnlyExample, DragExample, DragOntoRowExample, DragWithoutRowHeaderExample, ReorderExample} from './TableDnDExamples';
 import {Droppable} from '../../../@react-aria/dnd/stories/dnd.stories';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
@@ -41,6 +41,19 @@ export const DragOutOfTable: TableStory = {
   ),
   name: 'Drag out of table'
 };
+
+export const DragOutOfTableWithoutTableHeader: TableStory = {
+  render: (args) => (
+    <Flex direction="row" wrap alignItems="center" gap="size-200">
+      <Droppable />
+      <DragWithoutRowHeaderExample
+        dragHookOptions={{onDragStart: action('dragStart'), onDragEnd: action('dragEnd')}}
+        tableViewProps={args} />
+    </Flex>
+  ),
+  name: 'Drag out of table without table header'
+};
+
 export const CustomDragPreview: TableStory = {
   args: {
     disabledKeys: ['Foo 2']

packages/@react-spectrum/table/stories/TableDnDExamples.tsx

@@ -20,6 +20,15 @@ let columns = [
   {name: 'IP Address', key: 'ip_address'}
 ];
 
+let columnsWithOutRowHeader = [
+  {name: 'First name', key: 'first_name'},
+  {name: 'Last name', key: 'last_name'},
+  {name: 'Email', key: 'email'},
+  {name: 'Department', key: 'department'},
+  {name: 'Job Title', key: 'job_title'},
+  {name: 'IP Address', key: 'ip_address'}
+];
+
 let items = [
   {id: 'a', first_name: 'Vin', last_name: 'Charlet', email: 'vcharlet0@123-reg.co.uk', ip_address: '18.45.175.130', department: 'Services', job_title: 'Analog Circuit Design manager'},
   {id: 'b', first_name: 'Lexy', last_name: 'Maddison', email: 'lmaddison1@xinhuanet.com', ip_address: '238.210.151.48', department: 'Research and Development', job_title: 'Analog Circuit Design manager'},
@@ -69,6 +78,40 @@ export function DragExample(props?) {
   );
 }
 
+export function DragWithoutRowHeaderExample(props?)  {
+  let {tableViewProps, dragHookOptions} = props;
+  let getItems = (keys) => [...keys].map(key => {
+    let item = items.find(item => item.id === key);
+    return {
+      'text/plain': `${item.first_name} ${item.last_name}`
+    };
+  });
+
+  let {dragAndDropHooks} = useDragAndDrop({
+    getItems,
+    getAllowedDropOperations() {
+      getAllowedDropOperationsAction();
+      return ['move', 'cancel'];
+    },
+    ...dragHookOptions
+  });
+
+  return (
+    <TableView aria-label="TableView with dragging enabled" selectionMode="multiple" width={400} height={300} onSelectionChange={s => onSelectionChange([...s])} dragAndDropHooks={dragAndDropHooks} {...tableViewProps}>
+      <TableHeader columns={columnsWithOutRowHeader}>
+        {column => <Column minWidth={100}>{column.name}</Column>}
+      </TableHeader>
+      <TableBody items={items}>
+        {item => (
+          <Row>
+            {key => <Cell>{item[key]}</Cell>}
+          </Row>
+        )}
+      </TableBody>
+    </TableView>
+  );
+}
+
 export function ReorderExample(props) {
   let {onDrop, onDragStart, onDragEnd, tableViewProps} = props;
   let list = useListData({

packages/@react-spectrum/table/test/TableDnd.test.js

@@ -24,7 +24,7 @@ import {CUSTOM_DRAG_TYPE} from '@react-aria/dnd/src/constants';
 import {DataTransfer, DataTransferItem, DragEvent, FileSystemDirectoryEntry, FileSystemFileEntry} from '@react-aria/dnd/test/mocks';
 import {DIRECTORY_DRAG_TYPE} from '@react-aria/dnd';
 import {DragBetweenTablesComplex} from '../stories/TableDnDUtilExamples';
-import {DragBetweenTablesExample, DragBetweenTablesRootOnlyExample, DragExample, DragOntoRowExample, ReorderExample} from '../stories/TableDnDExamples';
+import {DragBetweenTablesExample, DragBetweenTablesRootOnlyExample, DragExample, DragOntoRowExample, DragWithoutRowHeaderExample, ReorderExample} from '../stories/TableDnDExamples';
 import {Droppable} from '@react-aria/dnd/test/examples';
 import {Flex} from '@react-spectrum/layout';
 import {globalDndState} from '@react-aria/dnd/src/utils';
@@ -114,6 +114,12 @@ describe('TableView', function () {
       );
     }
 
+    function DraggbleWithoutRowHeader(props) {
+      return (
+        <DragWithoutRowHeaderExample onDrop={onDrop} onDragStart={onDragStart} onDragEnd={onDragEnd} {...props} />
+      );
+    }
+
     function Reorderable(props) {
       return (
         <ReorderExample disabledKeys={['a']} onDrop={onDrop} onDragStart={onDragStart} onDragEnd={onDragEnd} {...props} />
@@ -197,6 +203,56 @@ describe('TableView', function () {
         expect(dataTransfer._dragImage.y).toBe(5);
       });
 
+      it('should render a drag preview with highlight selection style', function () {
+        let {getByRole, getAllByText} = render(
+          <DraggbleWithoutRowHeader tableViewProps={{selectedKeys: ['a'], selectionStyle: 'highlight'}} />
+        );
+
+        let grid = getByRole('grid');
+        let rowgroups = within(grid).getAllByRole('rowgroup');
+        let rows = within(rowgroups[1]).getAllByRole('row');
+        let row = rows[0];
+        let cell = within(row).getAllByRole('rowheader')[0];
+        let cellText = getAllByText(cell.textContent);
+        expect(cellText).toHaveLength(1);
+
+        let dataTransfer = new DataTransfer();
+
+        fireEvent.pointerDown(cell, {pointerType: 'mouse', button: 0, pointerId: 1, clientX: 5, clientY: 5});
+        fireEvent(cell, new DragEvent('dragstart', {dataTransfer, clientX: 5, clientY: 5}));
+        expect(dataTransfer._dragImage.node.tagName).toBe('DIV');
+
+        // Verify that when no rowHeader is set, the drag preview displays the text of the first element of the row
+        expect(dataTransfer._dragImage.node.textContent).toBe('Vin');
+        expect(dataTransfer._dragImage.x).toBe(5);
+        expect(dataTransfer._dragImage.y).toBe(5);
+      });
+
+      it('should render a drag preview with checkbox selection style', function () {
+        let {getByRole, getAllByText} = render(
+          <DraggbleWithoutRowHeader tableViewProps={{selectedKeys: ['a'], selectionStyle: 'checkbox'}} />
+        );
+      
+        let grid = getByRole('grid');
+        let rowgroups = within(grid).getAllByRole('rowgroup');
+        let rows = within(rowgroups[1]).getAllByRole('row');
+        let row = rows[0];
+        let cell = within(row).getAllByRole('rowheader')[0];
+        let cellText = getAllByText(cell.textContent);
+        expect(cellText).toHaveLength(1);
+      
+        let dataTransfer = new DataTransfer();
+      
+        fireEvent.pointerDown(cell, {pointerType: 'mouse', button: 0, pointerId: 1, clientX: 5, clientY: 5});
+        fireEvent(cell, new DragEvent('dragstart', {dataTransfer, clientX: 5, clientY: 5}));
+
+        // Verify that when no rowHeader is set, the drag preview displays the text of the first element of the row
+        expect(dataTransfer._dragImage.node.tagName).toBe('DIV');
+        expect(dataTransfer._dragImage.node.textContent).toBe('Vin');
+        expect(dataTransfer._dragImage.x).toBe(5);
+        expect(dataTransfer._dragImage.y).toBe(5);
+      });
+
 
       it('should allow drag and drop of a single row', async function () {
         let {getByRole, getByText} = render(

packages/@react-stately/table/src/TableCollection.ts

@@ -274,15 +274,7 @@ export class TableCollection<T> extends GridCollection<T> implements ITableColle
 
     // Default row header column to the first one.
     if (this.rowHeaderColumnKeys.size === 0) {
-      if (opts?.showSelectionCheckboxes) {
-        if (opts?.showDragButtons) {
-          this.rowHeaderColumnKeys.add(this.columns[2].key);
-        } else {
-          this.rowHeaderColumnKeys.add(this.columns[1].key);
-        }
-      } else {
-        this.rowHeaderColumnKeys.add(this.columns[0].key);
-      }
+      this.rowHeaderColumnKeys.add(this.columns.find(column => !column.props?.isDragButtonCell && !column.props?.isSelectionCell).key);
     }
   }