Polaris-react: [TrapFocus] causes infinite loop when used in a Dialog

[darrenhebner]

Issue summary

The TrapFocus component appears to be creating an infinite loop. If you look at the stacktrace below, you can see that Dialog triggers focusFirstFocusableNode which triggers a focusin event. This event triggers handleFocusIn which calls focusFirstFocusableNode. The loop keeps going.

This ends up locking the main thread for a significant time.

Expected behavior

After the initial focus, the loop should stop.

Steps to reproduce the problem

This doesn't appear to be happening with all modals. I haven't been able to identify what scenario causes this bug.

cc @devonpmack @AndrewMusgrave

[LauraAubin]

👀@lauraaubin @dleroux

[dleroux]

I think the issue is because TrapFocus is actually working now and the component in question is rendering 2 modals at the same time. There is a PagedModal component and Modal rendering at the same time. So when the PageModal plays out, the other loads and trap focus gets confused. Still investing to confirm.

[dleroux]

Pretty sure I fixed the issue in web but we should probably find a way to prevent this from happening.

[darrenhebner]

Good find @dleroux! Thanks for looking in to this.

[devonpmack]

@dleroux Can we only render a TrapFocus when open is true? Would that solve the issue?

[dleroux]

Currently, that is the case. TrapFocus only gets rendered when open is true. The current implementation actually has a moment where 2 modals have the open prop because of the animation. We will find a solution to prevent this is Polaris, this particular implementation should be fixed as well. Maybe the solution is to include the column reordering modal as be part of the paged modal, I'm not sure.

[devonpmack]

Oh I see thanks for clarifying. It's not currently blocker for us as we can easily work around it.