focus-trap-react: TypeError: Cannot read properties of undefined (reading 'contains')

We’re using Sentry to log errors in our production application and I randomly see this error pop up from time to time. I haven’t been able to figure out why it is happening so I’ve mostly ignored it, but I actually was able to reproduce it locally today by complete accident. I have a custom Modal component that uses focus-trap-react and I believe that is where the error originates. I’m using the latest version of Chrome on the latest version of MacOS so I don’t think this is specific to any certain browser (I’ve seen the Sentry error come through in Chrome on Windows 10 as well from our production app users).

This is the error I’m seeing: Screenshot 2023-01-24 at 8 29 15 AM It is interesting how/why its happening. For this particular case, I have the modal open and all I’m doing is automatically calling a download link for a PDF (and a dummy PDF at that) as the modal is closing:

const onDownloadPdf = () => {
    const a = document.createElement('a');

    a.href =
        'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf';
    a.target = '_blank';

    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
};

While the download is happening and opening a new tab with the PDF, the modal is closing in the other tab at the same time. This seems to be an important distinction because if I comment out the code inside of onDownloadPdf but still call the method, it does not error. It’s almost as if the concept of opening a new tab with a PDF in it is causing this error, but I can’t figure out the correlation nor track it down further (it just doesn’t make much sense to me as to why this would be happening).

I’m posting here in hopes of possibly triggering something in your mind, since you know the internals of the codebase, that may register as a possible issue based on the above information so that hopefully we can get to the bottom of this. I know this is pretty vague but perhaps it may be helpful in trying to resolve this.

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 18 (9 by maintainers)

Commits related to this issue

Most upvoted comments

@stefcameron excellent, thank you!

No worries, sounds good! luckily it doesn’t really break any functionality, its just an annoying error that pops up here and there, so i can definitely wait until you’re ready to release. thanks again!

@stefcameron awesome, i’m glad that it was helpful! i just gave that beta a try and can confirm that it is working without issue. thank you so much! this has been such a longstanding issue in Sentry for us that I’ll be thrilled to finally get rid of it 😃

@stefcameron I was able to put together an example of the issue and am attaching a zip.

focus-trap-react-bug.zip

If you grab that, run npm i and then npm start, you’ll see an Open button. Click that, then either hit close in the modal or click on the darker shim part and itll close, open a new window with a PDF, close that, and you’ll see the error in the console for focus trap.

I tried to clean this up as much as possible from code in two repos so apologies if its still a bit messy but it does reproduce the issue correctly. Let me know if you have any questions.

@stefcameron sounds good, just let me know when ready and I’ll give them a spin