This is a copy over from microsoft/fluent-ui-react#1429 with an updated code snippet. The issue is closed but we found it is not fixed.
Bug Report
Focus trap zone is not properly setting focus for lazy loaded components. It looks like the focus trap zone currently only sets focus on componentDidMount, should it also do this in componentDidUpdate?
Steps
The attached codepen opens a popup with a spinner and simulates lazy loading the popup content. Note that even though we are using the popupFocusTrapBehavior, the first time you click on the "Click Me!" button, the button inside the popup will not have focus. It works the second time once the content is loaded.
Repro steps (in codepen):
Click on the "Click Me!" button
Hit Enter key
Expected Result
Should get an alert with the message "I was clicked"
Actual Result
The popup closes
Version
0.31.1
Testcase
https://codesandbox.io/s/stardust-ui-example-forked-44rxm
This is a copy over from microsoft/fluent-ui-react#1429 with an updated code snippet. The issue is closed but we found it is not fixed.
Bug Report
Focus trap zone is not properly setting focus for lazy loaded components. It looks like the focus trap zone currently only sets focus on componentDidMount, should it also do this in componentDidUpdate?
Steps
The attached codepen opens a popup with a spinner and simulates lazy loading the popup content. Note that even though we are using the popupFocusTrapBehavior, the first time you click on the "Click Me!" button, the button inside the popup will not have focus. It works the second time once the content is loaded.
Repro steps (in codepen):
Click on the "Click Me!" button
Hit Enter key
Expected Result
Should get an alert with the message "I was clicked"
Actual Result
The popup closes
Version
0.31.1
Testcase
https://codesandbox.io/s/stardust-ui-example-forked-44rxm