RaC Modal: add a prop to disable focus trap
- 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.

### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor 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