Skip to content

🐛 fix: prevent actions menu closing on diagonal hover#656

Open
jairoFernandez wants to merge 2 commits into
mainfrom
fix/table-actions-diagonal-hover
Open

🐛 fix: prevent actions menu closing on diagonal hover#656
jairoFernandez wants to merge 2 commits into
mainfrom
fix/table-actions-diagonal-hover

Conversation

@jairoFernandez

Copy link
Copy Markdown
Contributor

The row actions (kebab) menu closed when moving the cursor diagonally toward the options. The gap between the trigger and the panel used a margin that collapsed outside the hoverable area, and the menu toggled via display with no grace period.

  • Replace the margin gap with padding on the toggled wrapper so the trigger, bridge and panel form a continuous hover region.
  • Toggle via visibility/opacity with a 200ms close delay: opens instantly on hover, waits before closing so diagonal moves re-enter.
  • Add a RowActions example under In Review/Table for review.

@jairoFernandez jairoFernandez self-assigned this Jun 30, 2026
@jairoFernandez jairoFernandez force-pushed the fix/table-actions-diagonal-hover branch 3 times, most recently from ea01e5e to cab0c66 Compare June 30, 2026 20:51
The row actions (kebab) menu had two usability issues:

1. It closed when moving the cursor diagonally toward the options. The
   gap between the trigger and the panel used a margin that collapsed
   outside the hoverable area, and the menu toggled via display with no
   grace period.
2. On the last rows the panel was clipped by the table body wrapper
   (overflow-hidden), hiding the lower options behind the pagination.

- Replace the margin gap with padding on the toggled wrapper so the
  trigger, bridge and panel form a continuous hover region.
- Toggle via visibility/opacity: opens instantly on hover, waits 150ms
  before closing so diagonal moves re-enter.
- Open the panel upward when there is not enough room below within the
  clipping container, so options are never hidden.
Cover rendering, option click with the row data, the empty-actions
case, and the downward/upward (flip) opening direction.
@jairoFernandez jairoFernandez force-pushed the fix/table-actions-diagonal-hover branch from 9fe04d9 to c24e8ad Compare June 30, 2026 22:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant