Infinite recursive call having to do with fullscreen, focus change and getTabsterContext

[marlun]

We're using @fluentui/react-components and are having problems with an infinite recursive call having something to do with fullscreen and focus. We've got a component with a video and a toolbar. Everything works fine until we make it fullscreen and then change the focus, by clicking something like a button.

When profiling we can se the following:

The function which seems to be called over and over is getTabsterContext. It then seems to call similar functions but not the same everytime:

But it keeps going and the tab freezes:

@ling1726 It started when we moved from 9.35.0 to 9.37.3 and checking the git log we can see that there's been some changes around focus and tabster.

We would like to identify a specific commit that introduces the problem but we're having a hard time knowing how to test specific commits instead of released version tags of @fluentui/react-components.

[ling1726]

Is it possible to create a minimal repro on codesandbox using fluent UI components? It would be much faster for us to root cause and apply a fix

[ling1726]

Thanks for the repro, we will try it out and investigate

FYI @mshoho

[marlun]

Has there been any development here? Have you managed to understand the problem?

[mshoho]

Yes, it is infinite loop in virtual parents handling (a parent element references child element as virtual parent). We're following up with @ling1726 for the proper fix.

[ling1726]

Looking at the example I would actually call that an edge case we never considered - we've always assumed the Portal to be rendered out of DOM order to the reference element. I've created #29991 which should be fixed by #29990.

It's a nice edge case to catch - thx

[marlun]

Great! Will test it out when there's a new react-components release, thanks for looking at it ❤️

[marlun]

We've tested the new release and it seems to be fixed. Thanks for the help!