'You tried to return focus to but it is not in the DOM anymore' warning.

[Jacob-Allen]

I have recently upgraded react-modal from 1.7.1 to 3.1.6. I am now getting a warning in the console whenever react-modal unmounts.

Steps to reproduce:

1. Mount a component that is using React Modal as a child.
2. Dismount the component has has React Modal as a child. (this happens for me when I navigate between routes)

Expected behavior:

1. I'm not sure if this warning is due to incorrect implementation on my part or if this is expected behavior.

Additional notes:

The modals are behaving normally, I am just unsure why the focus manager is giving me this warning.

[diasbruno]

Hi @Jacob-Allen, before the modal is open, it will put in a queue the document.activeElement, so it can try to return the focus after the modal is closed. So, if this element doesn't exist in the next route this warn will be presented.

[Jacob-Allen]

Hey @diasbruno,
It is often that the modal is never opened on certain pages. Is there anything I can do to drop it from the queue before I dismount the component so that I can circumvent this warning?

[diasbruno]

There is an option we added recently - shouldReturnFocusAfterClose={bool}. If false, it will be no-op when pop out of the queue.

[diasbruno]

It should work fine in case where you can jump to other pages from the modal, but if it's not the case, it may cause some accessibility issues.

[diasbruno]

I'll keep this open, because this feature is not documented.

[indiesquidge]

@diasbruno, I am also getting this warning more than a dozen times. It does not happen when I run my app in the browser, but when I run my tests. I see that the logic for displaying this warning has existed for some time now, but I only started seeing it when I upgrade to v3.1.7.

I don't fully understand why this warning is being shown to me. It occurs on components that have modals in them, but they are closed by default, so I'm curious why would they ever be attempting to "return focus" when they shouldn't have been muddling with the focus in the first place (since they are all closed).

[indiesquidge]

before the modal is open, it will put in a queue the document.activeElement, so it can try to return the focus after the modal is closed.

Doh, I missed this my first read through! So the modals are adding to the queue before they are open, i.e. when they are rendered.

I can remove the error by not manually unmounting my component (removing ReactDOM.unmountComponentAtNode(node) from my smoke test), which come to think of it seems fine.

I suppose I hadn't considered this when I first started writing my tests, but there is usually no reason to manually unmount (only caveat is when testing things like <ReactModal> open/close directly, since exiting a test with a modal open will pollute document.body.classList, which could affect other tests). I think it would be safe to remove the manual unmount call for my smoke tests, which also resolves my issue of seeing this warning so many times when running tests.

Thanks!

[royrwood]

I'm getting this warning, too. Tracing into it, the following code in focusManager.js is the issue:

function returnFocus() {
  var toFocus = null;
  try {
    toFocus = focusLaterElements.pop();
    toFocus.focus();
    return;
  } catch (e) {
    console.warn(["You tried to return focus to", toFocus, "but it is not in the DOM anymore"].join(" "));
  }
}

For whatever reason, toFocus is undefined when the line toFocus.focus() is called. Why not include a test to ensure that toFocus has a valid value before executing that?

In my test case, I haven't actually displayed a modal yet, and still get the warning (i.e. my render( ) method does include a <Modal> element, but isOpen=false so it is not actually visible).

[Jacob-Allen]

Hi @royrwood ,

@diasbruno mentioned that there is an undocumented prop to bypass the focusmanager. By adding shouldReturnFocusAfterClose={false} to the Modal it will opt out of the focus handler. I have the parent component set this value to false in the componentWillUnmount and it has caused the warning to go away.

[diasbruno]

This is actually documented on the https://reactcommunity.org/react-modal/. (sorry)

[indiesquidge]

The problem with this is that I don't want to opt out of the focus manager. I just want to be able to render components in my test without every component that has a modal attached to it throwing this warning.

This check in returnFocus as it stands now is making a huge assumption in that it never expects a component to be manually unmounted, which is unrealistic.

This will warn on any test that unmounts—including Enzyme unmounts—and will even show the warning with the default CRA setup.