adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.72k stars 1.09k forks source link

TableView specific item drop target not visually showing drop highlight #5404

Open GrantRussell opened 10 months ago

GrantRussell commented 10 months ago

The TableView drop highlighting does not appear when attempting to drop over a specific item. I only see blue highlighting for drops when hovering over root, but none appear when I attempt to drop over a specific item.

This does not occur with other drag-and-drop components like ListView, even though we are passing the exact same drag-and-drop hooks. Here is a CodeSandbox link to reproduce the issue:

https://codesandbox.io/s/laughing-smoke-qxvvnc?file=/src/App.js

๐Ÿค” Expected Behavior?

When I hover over a target that accepts dropping, I would like to see blue highlighting to indicate the item will accept the drop.

๐Ÿ˜ฏ Current Behavior

No visual highlighting appears when I hover over a target that accepts dropping.

Additional context from @reidbarber:

the item drop events are occurring, the styles are being applied, and even the computed styles look right (so not a css specificity issue)

๐Ÿ’ Possible Solution

No response

๐Ÿ”ฆ Context

No response

๐Ÿ–ฅ๏ธ Steps to Reproduce

https://codesandbox.io/s/laughing-smoke-qxvvnc?file=/src/App.js

Use the image asset to drag over the two components (TableView and ListView) and compare the styling that is applied when hovering over specific items in both components.

Version

3.32.0

What browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

Windows 10

๐Ÿงข Your Company/Team

Adobe / Assets Essentials

๐Ÿ•ท Tracking Issue

No response

yihuiliao commented 10 months ago

Just a quick initial look but it looks like this broke in v3.29 which is when we added expandable rows so it might be related to those changes.

reidbarber commented 10 months ago

Looks like this is due to no longer updating the background-color of the Table-cellWrapper elements when it the row is a drop target.

reidbarber commented 10 months ago

Looks like dropState is stale when used in renderWrapper: https://github.com/adobe/react-spectrum/blob/9e6513b9adc527e0926795e7e3361788ae860333/packages/%40react-spectrum/table/src/TableViewBase.tsx#L363