react-focus-lock with material UI drop-downs

[chamathsilva]

If drop-down elements are warped with the FocusLock, items in the drop-down are cannot access and select from the keyboard. (using arrow keys and enter key press ).
Note: It works with mouse click events.

[theKashey]

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

[chamathsilva]

Yes it can access without focus lock active

Example without focus lock

Example with focus lock

[theKashey]

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 - Not working with portals #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 :(

[theKashey]

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

[panoslympe]

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 :)