Fluentui: Incorrect focus behaviour when we have a FocusZone inside a FocusTrapZone

[sorosoro2]

Bug Report

• __Package version(s)__: 4.25.1
• __Browser and OS versions__: Chrome/Edge with Windows 10 RS2

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? Yes

Requested priority: Normal

Products/sites affected: Visual Studio Team Services / Team Foundation Server

Describe the issue:

When I have a FocusZone (as the last element group) inside a FocusTrapZone, on tabbing out from the FocusZone, the focus goes outside the FocusTrapZone. The TrapZone checks if the current element is the last focusable one inside it and if it is, it moves the focus to the first element. However, since in case of FocusZones, tab press on any of the elements inside it would take the focus outside it, when the last group of elements is inside a FocusZone, the focus is gone

Actual behavior:

As mentioned, focus leaves the FocusTrapZone, once we press tab on an element, which is not the last one, indise the FocusZone, which is the last element in the FocusTrapZone

Note that the only case in which the behaviour is correct is when my focus is on the last element inside the FocusZone, when I tab. In this case the computed last element is the current element. For any other element inside the FocusZone, tab takes the focus outside parent FocusTrapZone

[lijunle]

We are getting the same bug! 😭

[ipip2005]

I'd like to provide a codepen repro:
https://codepen.io/anon/pen/NvVEYq?editors=0010

FocusTrapZone is not trapping focus.
However, it works after I remove the FocusZone inside it.

[SpencerLynn]

I have a PR open to fix this issue. #4172

[SpencerLynn]

This issue needs to be re-opened, as the PR that fixed this issue was reverted.