You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am working on building a Menu component that opens up inside of a Modal component. This means that the Menu JSX is nested inside of the Modal JSX. The menu is a React Portal. When I tell the Menu to open from inside of the Modal, the Menu should receive focus (I programmatically call menu.focus()). In browsers other than IE 11, this works properly. In IE 11, however, the Menu does not receive focus (the focus stays in the Modal).
The Modal is wrapper in a ReactFocusLock component. The Menu is nested inside of the Modal which means that it is nested inside of the same ReactFocusLock component instance as Modal. The difference, however, is that Menu is a React Portal that renders outside of the Modal.
I have simplified example code below. The <input> and <button> represent the Modal and the inner button (named "exit portal") represents the Menu. In Chrome, for example, I can move between the "Enter Portal" and "Exit Portal" buttons by pressing the Enter/Return key. This is expected behavior. I can also tab between the input and "Enter Portal" button without focusing the "Exit Portal" button because the "Exit Portal" button renders outside of the ReactFocusLock component in the DOM. This is also expected behavior.
In IE 11, however, I must hit Enter twice to go from "Enter Portal" to "Exit Portal". To go back from "Exit Portal" to "Enter Portal", I only have to hit Enter once. Also, if the "Exit Portal" button is currently focused and I hit the Tab key, the <input> gets focused and then hitting Tab no longer works.
It appears that these problems are bugs in IE 11 and I have traced them down to ReactFocusLock. Please let me know if you need any more info. I really appreciate the time that you put into this library - it's a life saver!!
The example code below was bootstrapped with Create React App:
If this is not working - then it is not working and I cannot fix it.
However you probably may - using shards prop
<ReactFocusLockshards={[portalButtonRef]}>
That will explicitly tell FocusLock that it shall consider portalled button as a part of itself. You would be even better to provide ref to parent node of the button (top portalled node).
I hope this one line fix will resolve the for you.
This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.
I am working on building a
Menu
component that opens up inside of aModal
component. This means that theMenu
JSX is nested inside of theModal
JSX. The menu is a React Portal. When I tell theMenu
to open from inside of theModal
, theMenu
should receive focus (I programmatically callmenu.focus()
). In browsers other than IE 11, this works properly. In IE 11, however, theMenu
does not receive focus (the focus stays in theModal
).The
Modal
is wrapper in aReactFocusLock
component. TheMenu
is nested inside of theModal
which means that it is nested inside of the sameReactFocusLock
component instance asModal
. The difference, however, is thatMenu
is a React Portal that renders outside of theModal
.I have simplified example code below. The
<input>
and<button>
represent theModal
and the inner button (named "exit portal") represents theMenu
. In Chrome, for example, I can move between the "Enter Portal" and "Exit Portal" buttons by pressing the Enter/Return key. This is expected behavior. I can also tab between the input and "Enter Portal" button without focusing the "Exit Portal" button because the "Exit Portal" button renders outside of theReactFocusLock
component in the DOM. This is also expected behavior.In IE 11, however, I must hit Enter twice to go from "Enter Portal" to "Exit Portal". To go back from "Exit Portal" to "Enter Portal", I only have to hit Enter once. Also, if the "Exit Portal" button is currently focused and I hit the Tab key, the
<input>
gets focused and then hitting Tab no longer works.It appears that these problems are bugs in IE 11 and I have traced them down to
ReactFocusLock
. Please let me know if you need any more info. I really appreciate the time that you put into this library - it's a life saver!!The example code below was bootstrapped with
Create React App
:Here are my
package.json
dependencies:The text was updated successfully, but these errors were encountered: