Multiple modals and returnFocus

[andraaspar]

trafficstars

Focus is not returned with multiple <FocusLock>s.

Sample CRA project: https://github.com/andraaspar/react-focus-lock-stack-missing

To reproduce:

1. Click ‘Open modal 1’
2. On the modal, click ‘Open modal 2’
3. On the 2nd modal, click ‘X2’ → Focus is set to ‘Open modal 2’ instead of ‘X1’
4. On the modal, click ‘X1’ → Focus is not returned to ‘Open modal 1’

[theKashey]

Just in time ;)

[andraaspar]

I'm sorry? I'm not quite sure what you mean?

I tried to make it easy to reproduce. Did it make sense? Is it in scope for this library, or is it not?

[theKashey]

I mean that you created the issue just in time, when this package is under my attention.

[theKashey]

So - that's funny.

• focus is returned when Lock is deactivated
• when a new Lock is going active the old one ... got deactivated
• it returns focus
• and the new one read the "initial focus", not the one it was a moment ago...

[andraaspar]

@theKashey: Thank you for looking into it.

[theKashey]

Issue resolved in v2.0.0. No API changes, except raising minimal React version to 16.8. I hope that's not a deal breaker for you.

[andraaspar]

@theKashey: Thanks a lot for the quick fix! It works great!

[Haraldson]

I’m experiencing this now, with 2.2.1. The ‘inner’ modal returns focus correctly to its trigger element in the ‘outer’ modal, but the ‘outer’ modal is unable to return focus to its trigger element on the page.

I also tried downgrading to 2.0.0 in case any regressions had been introduced since, unfortunately with no luck.

[theKashey]

Sounds like it's not working properly in deeply nested cases.

[Haraldson]

To provide a bit more context to my use-case: My modals aren’t really structurally nested, they are both portaled to the same DOM element and become siblings, but virtually they are, indeed, nested.

[Haraldson]

Actually, you can probably just close this issue again. Perhaps there could be a hint about this behavior in dev environments, but basically what happened is that I disable my initial trigger when it’s clicked so that it appears a certain way through the overlay. When the modal closes the button gets enabled again, but a timing issue (Framer Motion’s <AnimatePresence>) prevents it from being ready in time to receive focus.

[theKashey]

But are you able to resolve the issue, or focus-lock should add some timeout support to the return focus logic?

[Haraldson]

It’s not super easy to solve it with the current tools provided with focus-lock, so maybe it would be a good idea to somehow have it trigger on an event, or after a timeout as you suggest.

[theKashey]

Sure. This might also resolve another issue with a too-fast move focus inside - https://github.com/theKashey/react-focus-on/issues/36

[stale[bot]]

This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.