adobe / adobe/react-spectrum

RaC Modal: add a prop to disable focus trap

Open
#7,954 3 comments 4 reactions 0 assignees View on GitHub
FocusScope Overlays
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the feature here

While locking the focus inside a Modal is the best overall approach and should remain the default behaviour it may create issue in particular cases, such as when other components inside the Modal creates popover or dialogs that cannot receive proper focus. In our case the problem has arisen when we tried to place a CK Editor istance inside a RaC Modal.

### 🤔 Expected Behavior?

If this new prop is set to `true` the Modal should not lock the focus within itself.

### 😯 Current Behavior

There are no ways to avoid this that I'm aware of at the moment.

### 💁 Possible Solution

I didn't find a way to implement this even using the lower level hooks like `useDialog`.

### 🔦 Context

Other libraries like [MUI](https://mui.com/material-ui/react-modal/?srsltid=AfmBOoo0BdDYLS_LVaHj1ah0CfMdV0Cad0dqqJXYqYDs1jlH52IwOvST#focus-trap) or [ARK](https://ark-ui.com/react/docs/components/dialog) have provided ways to disable focus trap inside a Modal.

### 💻 Examples

This GIF should display the current behaviour.

![Image](https://github.com/user-attachments/assets/b8aaa98d-5a15-44a5-bb54-749a381a4e04)

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start at the RaC Modal implementation and the lower-level useDialog hook mentioned in the issue; inspect how focus is locked. Define the new prop so true allows focus to leave the Modal while the default remains unchanged, then verify the CK Editor/popover scenario and existing Modal behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.