react-focus-lock with material UI drop-downs about react-focus-lock HOT 5 CLOSED

for anyone at 2021 here, you can refer here https://mui.com/components/trap-focus/ ! MUI now gives you out of the box focus lock and yes it is working with their keyboard events :)

from react-focus-lock.

Could you access them without focus lock active?
Any example, like s 2 lines on codesandbox?

from react-focus-lock.

Yes it can access without focus lock active

Example without focus lock

Example with focus lock

from react-focus-lock.

So, the problem is simple - Focus Lock is locking everything inside. There is only 2 ways to escape it

• use focus groups
• receive focus event from an element not inside. From a portal - #19, as long in React focus events bubble from portals and Lock could receive focus even from node outside.

So the problem - material UI triggering focus my calling low-level DOM API, thus I receive event from document, not React and not thought the portal.

Technology is limited, I could not handle it :(

from react-focus-lock.

whiteLists, introduced in v1.13.0 could solve this.
See the story for details - https://github.com/theKashey/react-focus-lock/blob/master/stories/MUI.js#L49

from react-focus-lock.