Table(react-aria-components): After re-order, `data-hovered` is applied to the row that was previously hovered
- 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
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