Modal's FocusTrapZone, with FocusTrapCallout child, not behaving as expected

[cnamal]

Hi folks,

We have a FocusTrapCallout inside a Modal, similar to what's in the following codepen: https://codepen.io/namal-ms/pen/LvEOOb

As you can see, the FocusTrapZone of the Modal doesn't work as expected, and tab focus doesn't cycle through the couple buttons in the modal, and you can get to the background button.

Is this normal? The "Dialog nested in a Panel" example in the FocusTrapZone documentation leads me to believe it isn't expected, but I'm not sure.

When looking for workarounds, I noticed giving the doNotLayer prop to the Callout solves the issue. Could someone please explain the implications of setting doNotLayer to true? 🙂
I'm not well versed in the layering system of Fabric unfortunately.

Apologies if this isn't the right forum for this. If so, please let me know where I should send my questions (Microsoft employee, if that changes anything ^^)

Codepen demonstrating the issue

https://codepen.io/namal-ms/pen/LvEOOb

[JasonGore]

This looks like a recent regression with FocusTrapZone changes. v6.142.0 seems to work as expected.

[JasonGore]

Ok, I've done more investigation and have a clearer picture of what's going on here.

There are basically two FocusTrapZones active in the provided CodePen: one in Modal and one in FocusTrapCallout. In this case, FocusTrapCallout has no content, so it's trying to grab focus but has no content to put focus on. As a result, both versions appear to act oddly: OUFR v6.142.0 focus falls back from FocusTrapCallout to Modal (also arguably not valid behavior) and OUFR current version lets focus wander around the page.

However, I'm not sure this is a valid case: With a FocusTrapCallout having no content, what should be focused? FocusTrapCallout is demanding focus, but has nothing to focus. I'm not sure that this is a valid use case. Can you provide more details as to your use case here?

As soon as I put some content into FocusTrapCallout, both master and v6.142.0 seem to work consistently by trapping focus within FocusTrapCallout content.

[cnamal]

Apologies for not providing a good enough example :(. Here is a closer example to what we have: https://codepen.io/namal-ms/pen/QPEdbj

In our code, a button of the Modal triggers the hidden prop of the Callout

[cnamal]

Here's a repro that's even closer to our code: https://codepen.io/namal-ms/pen/xeOgyy