fix(RAC): ListBox DnD with actions (#9150)

* fix: listbox dnd with actions

* add story

Author: reidbarber

packages/react-aria-components/src/ListBox.tsx

@@ -381,7 +381,7 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
 
   let draggableItem: DraggableItemResult | null = null;
   if (dragState && dragAndDropHooks) {
-    draggableItem = dragAndDropHooks.useDraggableItem!({key: item.key}, dragState);
+    draggableItem = dragAndDropHooks.useDraggableItem!({key: item.key, hasAction: states.hasAction}, dragState);
   }
 
   let droppableItem: DroppableItemResult | null = null;

packages/react-aria-components/stories/ListBox.stories.tsx

@@ -748,3 +748,63 @@ AsyncListBoxVirtualized.story = {
     delay: 50
   }
 };
+
+export let VirtualizedListBoxDndOnAction: ListBoxStory = () => {
+  let items: {id: number, name: string}[] = [];
+  for (let i = 0; i < 100; i++) {
+    items.push({id: i, name: `Item ${i}`});
+  }
+
+  let list = useListData({
+    initialItems: items
+  });
+
+  let {dragAndDropHooks} = useDragAndDrop({
+    getItems: (keys) => {
+      return [...keys].map(key => ({'text/plain': list.getItem(key)?.name ?? ''}));
+    },
+    onReorder(e) {
+      if (e.target.dropPosition === 'before') {
+        list.moveBefore(e.target.key, e.keys);
+      } else if (e.target.dropPosition === 'after') {
+        list.moveAfter(e.target.key, e.keys);
+      }
+    },
+    renderDropIndicator(target) {
+      return <DropIndicator target={target} style={({isDropTarget}) => ({width: '100%', height: 2, background: isDropTarget ? 'blue' : 'gray', margin: '2px 0'})} />;
+    }
+  });
+
+  return (
+    <div style={{display: 'flex', flexDirection: 'column', gap: 20, alignItems: 'center'}}>
+      <div style={{padding: 20, background: '#f0f0f0', borderRadius: 8, maxWidth: 600}}>
+        <h3 style={{margin: '0 0 10px 0'}}>Instructions:</h3>
+        <ul style={{margin: 0, paddingLeft: 20}}>
+          <li><strong>Enter:</strong> Triggers onAction</li>
+          <li><strong>Alt+Enter:</strong> Starts drag mode</li>
+          <li><strong>Space:</strong> Toggles selection</li>
+        </ul>
+      </div>
+      <div style={{height: 400, width: 300, resize: 'both', padding: 20, overflow: 'hidden', border: '2px solid #ccc', borderRadius: 8}}>
+        <Virtualizer
+          layout={ListLayout}
+          layoutOptions={{
+            rowHeight: 25,
+            gap: 4
+          }}>
+          <ListBox
+            className={styles.menu}
+            selectionMode="multiple"
+            style={{width: '100%', height: '100%'}}
+            aria-label="Virtualized listbox with drag and drop and onAction"
+            items={list.items}
+            dragAndDropHooks={dragAndDropHooks}
+            onAction={action('onAction')}>
+            {item => <MyListBoxItem>{item.name}</MyListBoxItem>}
+          </ListBox>
+        </Virtualizer>
+      </div>
+    </div>
+  );
+};
+

packages/react-aria-components/test/ListBox.test.js

@@ -1242,6 +1242,86 @@ describe('ListBox', () => {
       keyPress('Escape');
       act(() => jest.runAllTimers());
     });
+
+    it('should support onAction with drag and drop in virtualized list', async () => {
+      let items = [];
+      for (let i = 0; i < 20; i++) {
+        items.push({id: i, name: 'Item ' + i});
+      }
+
+      jest.restoreAllMocks();
+      jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 100);
+      jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 100);
+
+      let onAction = jest.fn();
+      let onReorder = jest.fn();
+
+      function VirtualizedDraggableListBox() {
+        let {dragAndDropHooks} = useDragAndDrop({
+          getItems: (keys) => [...keys].map((key) => ({'text/plain': key})),
+          onReorder,
+          renderDropIndicator: (target) => <DropIndicator target={target}>Drop</DropIndicator>
+        });
+
+        return (
+          <Virtualizer layout={ListLayout} layoutOptions={{rowHeight: 25}}>
+            <ListBox
+              aria-label="Test"
+              dragAndDropHooks={dragAndDropHooks}
+              onAction={onAction}
+              items={items}>
+              {item => <ListBoxItem>{item.name}</ListBoxItem>}
+            </ListBox>
+          </Virtualizer>
+        );
+      }
+
+      let {getAllByRole} = render(<VirtualizedDraggableListBox />);
+      let options = getAllByRole('option');
+
+      // Focus first item
+      await user.tab();
+      expect(document.activeElement).toBe(options[0]);
+
+      // Pressing Enter should trigger onAction, and not start drag
+      keyPress('Enter');
+      act(() => jest.runAllTimers());
+      expect(onAction).toHaveBeenCalledTimes(1);
+      expect(onAction).toHaveBeenCalledWith(0);
+      expect(onReorder).not.toHaveBeenCalled();
+
+      // Should not be in drag mode
+      options = getAllByRole('option');
+      expect(options.filter(opt => opt.classList.contains('react-aria-DropIndicator'))).toHaveLength(0);
+
+      // Now test that Alt+Enter starts drag mode
+      expect(document.activeElement).toBe(options[0]);
+      fireEvent.keyDown(document.activeElement, {key: 'Enter', altKey: true});
+      fireEvent.keyUp(document.activeElement, {key: 'Enter', altKey: true});
+      act(() => jest.runAllTimers());
+
+      // Verify we're in drag mode
+      options = getAllByRole('option');
+      let dropIndicators = options.filter(opt => opt.classList.contains('react-aria-DropIndicator'));
+      expect(dropIndicators.length).toBeGreaterThan(0);
+      expect(document.activeElement).toHaveAttribute('aria-label');
+      expect(document.activeElement.getAttribute('aria-label')).toContain('Insert');
+
+      // onAction should not have been called again
+      expect(onAction).toHaveBeenCalledTimes(1);
+
+      // Complete the drop
+      keyPress('ArrowDown');
+      expect(document.activeElement.getAttribute('aria-label')).toContain('Insert');
+      keyPress('Enter');
+      act(() => jest.runAllTimers());
+
+      expect(onReorder).toHaveBeenCalledTimes(1);
+      
+      // Verify we're no longer in drag mode
+      options = getAllByRole('option');
+      expect(options.filter(opt => opt.classList.contains('react-aria-DropIndicator'))).toHaveLength(0);
+    });
   });
 
   describe('inside modals', () => {