What's the best pattern for nested traps in the following scenario?

[AlexKDawson]

So I have nested Traps, both with the prop clickOutsideDeactivates. However when I click outside both traps while the inner one is active only the inner one closes.

Is there a pattern I can use to close both traps if the click is outside of both, or just the inner trap if the click is outside the inner trap but within the outer one?

[stefcameron]

Great question! When a second trap is activated, the first one gets paused, which means it stops listening to all the events necessary to detect things like outside clicks. So when the user clicks outside the second (now active) trap, the first trap doesn't know anything about it. But when the second trap gets deactivated from the outside click, the first one will automatically get unpaused. Unpausing a trap will effectively re-activate that trap, and the onActivate() and onPostActivate() hooks (which you can tap into) should get called -- except you won't have a parameter passed to those telling you anything about why the trap is being (re)activated.

So what I would propose you try is to use the function form of the clickOutsideDeactivates() option because that gives you a reference to the node that was clicked. Store the node in some state somewhere, say nestedDeactivateTriggerEl.

Then add an onPostActivate() handler to the first trap and check if you have nestedDeactivateTriggerEl and !firstTrapContainerEl.contains(nestedDeactivateTriggerEl), then firstTrap.deactivate()

Admittedly, it would be nice if focus-trap tracked the outside click all the way back "up" the chain of traps and simply did not reactivate (but just popped of the internal stack) any traps before the deactivated one that are also "click outside deactivates" and for which the clicked node falls outside of. (Not the best English sentence formulation there, but I think you get the drift...)

[stefcameron]

@AlexKDawson I was mistaken when I read the code. The trap does get "reactivated" after being paused, however, the reactivation process doesn't call the activation handlers again. It just reinstates the doc event listeners in the context of the unpaused trap. To preserve existing behavior, we'd have to add onPost/Pause() and onPost/Unpause() hooks -- something which I think would nicely compliment the existing onPost/Activate() and onPost/Deactivate() hooks.

[stefcameron]

This should help: focus-trap/focus-trap#914

[AlexKDawson]

Sounds good, I think these would be a great addition!

[AlexKDawson]

Just for visibility of anyone else reading, not trying to mention unrelated issues here. But I did play around with alternate implementations based on the existing props and did run into an issue documented in #947. So anyone following along might want to check up on that too if they have a similar use case

[stefcameron]

The pause/unpause hooks are in focus-trap v7.4.0 and focus-trap-react v10.1.1.