Comments (2)
The Dialog node itself is focusable (but not tabbable). That's why it's working that way.
There are two ways to fix it:
- acquire a
ref
to Dialog, and pass as ashard
properly to a FocusLock (does not work, ref would refer to a Component, not HTML node) - use
whiteList
to hide Dialog node from FocusLock
const whileList = el =>
!(el.getAttribute("role") === "document" && el.tabIndex === -1);
<FocusLock
whiteList={whileList}
>
See https://codesandbox.io/s/vmq598r420
PS: Keep in mind
- MUI v3 (current) has a broken focus lock
- MUI v4 (alpha) has a working focus lock, and you dont have to use FocusLock.
from react-focus-lock.
Thank you for your reply.
Yes that works, apologies, should have noticed there was a whitelist prop when I looked at the documentation.
from react-focus-lock.
Related Issues (20)
- [feature] add possibility to pass id to the `FocusLock` element HOT 2
- Console warning for react 18 users HOT 1
- react-focus-lock with [email protected] throws when focus taken from cross-origin iframe HOT 4
- Add browser level integration test HOT 1
- preventScroll is affecting scroll inside a modal
- react-focus-lock breaks password managers' autofill features HOT 7
- Socket dev picking up some security issues. HOT 3
- Add an `onError` callback for when focus fighting is detected HOT 2
- Feature request - Clickaway deactivation HOT 2
- `crossFrame={false}` has cross-browser Safari issues HOT 7
- Can't click without scroll being changed HOT 3
- Invalid hook call when using it inside a library HOT 3
- Issue with importing FocusLock component HOT 18
- /*#__PURE__*/ comment throws warning in Rollup HOT 3
- Unclear behavior during loosing focus in unmanaged area HOT 3
- Migrate to Typescript HOT 1
- Remove sidecar HOT 1
- useFocusLock HOT 1
- Version `2.11.0` doesn't compile with TS HOT 1
- Returning focus to element inside an iframe HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-focus-lock.