adobe / adobe/react-spectrum

Table(react-aria-components): After re-order, `data-hovered` is applied to the row that was previously hovered

Open
#4,534 3 comments 1 reaction 0 assignees View on GitHub
browser bug RAC
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🐛 Bug Report

When using RAC Table with Drag and Drop hooks, after re-ordering the `data-hovered` attribute is applied to the row that was first hovered before starting dragging.

Note that this is only noticeable when you stop moving cursor after drag ends. If you move it again, the `data-hovered` gets applied to the proper row which you're hovering on.

## 🤔 Expected Behavior

I'd expect the `data-hovered` attribute to be applied to the row where the drag ends

## 😯 Current Behavior

`data-hovered` is applied to the row that started the drag.

## 💁 Possible Solution

I don't know any, would appreciate any workarounds.

## 🔦 Context

When the row has some special styling applied on hover, it's unexpected seeing it applied to row that your cursor is currently not pointing at.

## 💻 Code Sample

https://codesandbox.io/s/busy-wu-f6qs9j?file=/src/App.js

https://github.com/adobe/react-spectrum/assets/36169811/65f7cd58-0060-4b53-a55a-f9c8d501ae89

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox at src/App.js and reproduce the issue using the RAC Table with drag-and-drop hooks. Verify that after dragging ends, data-hovered is applied to the row under the cursor rather than the row that was initially hovered; no repository file or test is named in the issue.

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.