Skip to content

Table cell incorrectly returns focus to button on modal close #8686

Description

@mike247

Provide a general summary of the issue here

When multiple buttons are in a Cell inside a Table and one of those buttons opens a modal - when you hit the escape button to close the model the focus is incorrectly returned to the first button in the cell not the button that opened the modal

To reproduce see this codesandbox https://codesandbox.io/p/sandbox/gracious-oskar-yr4qql
Focus on the "Open Dialog" button in a cell buy using tab and then arrow keys, press Enter to open the modal, and then press Escape. The focus will incorrectly return to the first button and not the open button.

🤔 Expected Behavior?

The focus should return to the button that opened the modal that the DialogTrigger is wrapped around

😯 Current Behavior

The focus returns to the first button in the Cell

💁 Possible Solution

~

🔦 Context

This is confusing for screen readers or other adapative tools that rely on the focus returning to consistent places after modals have been closed

🖥️ Steps to Reproduce

Here is a minimal reproduction in codeSandbox https://codesandbox.io/p/sandbox/gracious-oskar-yr4qql

To Reproduce

  1. Focus the table row by hitting tab
  2. Use the arrow keys to focus the open dialog button
  3. Hit enter to open the modal
  4. Hit esc to close the modal

Focus will now be on the action button

Version

react-aria-components 1.11.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

~

What operating system are you using?

Mac OS 15.5

🧢 Your Company/Team

~

🕷 Tracking Issue

~

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions