2 instances of focus-trap
#1146
Replies: 3 comments
-
Wouldn't this be solved by the author of library X not bundling I guess that would at least solve part of the issue, which could be conflicting versions. But I think this is besides the point of your inquiry here. The nature of focus-trap is it wants to trap the focus. Having two things competing for focus at the same time isn't a good situation. In light of that, maybe focus-trap instances shouldn't, by default, use their own stacks (since only one thing can have focus at any given time, and so only one thing should be vying for control over what has focus as well). So maybe focus-trap should internally manage a global stack on But that would be a breaking change (I prefer avoiding those if possible) and it would also mean the author of library X no longer has the control they want over the focus-trap they're using -- unless they update their code to opt-out of the default global stack, and then you're back to where you started. They would do that because they envision not wanting to support their solution in a world where it competes with something else they know nothing about. (I'm not saying whether that's philosophically right or wrong; just trying to think what they might think.) I guess it could be opt-in to use the global stack. Then you'd have to request author of library X to update their code to opt-in (and maybe convince them that it won't open a can of bugs for them; but maybe they already get complaints about the situation you're facing, I don't know). |
Beta Was this translation helpful? Give feedback.
-
Yeah, I am also not in favor of global stack solution. I don't have much context how current implementation works, but my understanding that it must be an event which is dispatched when user clicks outside, then focus-trap after that, focuses previous element (inside I can imagine of a solution when: Is it something what aligns to the existing mechanism, or it works differently ? |
Beta Was this translation helpful? Give feedback.
-
focus-trap doesn't dispatch custom events. It just listens, very intently, to everything that might cause a focus change, and reacts to that change either before ( When a trap is created (not activated), it gets the configured "trap stack" (either its own internal stack/array, or one provided via options): https://github.com/focus-trap/focus-trap/blob/master/index.js#L120 Subsequently, when a trap is activated, it just tells the stack it's active, which automatically pauses the currently-active (at the top of the stack) trap, if any: https://github.com/focus-trap/focus-trap/blob/master/index.js#L813 And when it's deactivated, it pops the stack by removing that trap from it, and re-activating the trap that's now at the top of the stack, if any: https://github.com/focus-trap/focus-trap/blob/master/index.js#L973 Pretty simple, really. What I'm suggesting is that this line, which declares the const internalTrapStack = (window['focus-trap'] ||= []); // create if not exist or the const trapStack = userOptions?.trapStack
? (
userOptions.trapStack === "global"
? (window['focus-trap'] ||= []) // use default global stack (create if not exist)
: userOptions.trapStack // assume Array (current behavior)
)
: internalTrapStack; // (current behavior) I'm not sure how to avoid putting something up on Either way, it remains to be seen how friendly either approach would be to iframes, since we do support putting traps in iframes. |
Beta Was this translation helpful? Give feedback.
-
Hey folks 👋
Recently I faced the following issue:
Imagine that I use a component library (X) which uses
focus-trap
as a dependency. Then In my app, I use that library (X) and also I want to addfocus-trap
.In the scenario when any
focus-trap
from library X is active, and I also activate focus-trap from my app I get recurrence error in browser as both instances want to focus their focusable elements in the traps.I know that we can provide global stack, but let's assume that author of library X does not expose
options
offocus-trap
- which is understandable. This way any time then I use a component from library X I have to pause all active traps from my app which shouldn't be the case, asfocus-trap
should do the heavy lifting.Do you see any resolution of this kind of problem ? We can even complicate this problem deeper, if the author of library X uses
focus-trap
with version before 'global stack' feature ^^Thanks in advance for any hints. Cheers
Beta Was this translation helpful? Give feedback.
All reactions