adobe / adobe/react-spectrum

TableView specific item drop target not visually showing drop highlight

Open
#5,404 3 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

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_

Contributor guide

Open the contributing guide

Research direction

Start with the CodeSandbox reproduction at src/App.js and compare the TableView and ListView drag-and-drop behavior while dragging the image asset over specific items. The issue is resolved when TableView shows the expected blue drop highlight for an item target in Firefox, Chrome, and Edge, as it does for root targets and ListView items.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.