Click in FocusTrap causes first item to focus, causing the view to scroll back to the top

Hi, I wonder if you can help me

We have a Modal with FocusTrap, initially focus is set to the close button, which is what we’re after.

But we’re seeing an issue where, when ever the modal is clicked focus goes back to the close button, and as our Modal has scrollable content, causes the view to scroll back to the top.

I’ve narrowed it down to:

// In case focus escapes the trap for some strange reason, pull it back in.
function checkFocusIn(e) {
  // In Firefox when you Tab out of an iframe the Document is briefly focused.
  if (container.contains(e.target) || e.target instanceof Document) {
    return;
  }
  e.stopImmediatePropagation();
  tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()); //<----- Here
}

Can you explain the intention? Is the entire function because of: “In case focus escapes the trap for some strange reason, pull it back in.”

• Thanks Chris

[TobyGWilliams]

Hi there,

We would also be grateful to see this released (and pushed out to focus-trap-react).

Many thanks

[stefcameron]

Catching up here… AFAICT, all the work related to this issue has been merged and long since published now. Closing. LMK if that’s not the case.