Cannot read properties of undefined (reading 'headlessuiFocusGuard') in 1.7.6+

[mattfelten]

What package within Headless UI are you using?

For example: @headlessui/react

What version of that package are you using?

For example: v1.7.6 and v1.7.7

What browser are you using?

Jest

Reproduction URL

Describe your issue

I'm running a Jest test that includes clicking on an element within a <Dialog /> and checking the results. This worked in 1.6.6 but I just upgraded to 1.7.7 and it's now broken. I traced it back and 1.7.5 works fine but somewhere in the 1.7.6 update broke the test. Weirdly, the same code in our live app and in Storybook work fine, just the Jest test breaks with this error.

TypeError: Cannot read properties of undefined (reading 'headlessuiFocusGuard')

      164 |   let tags = await screen.findAllByLabelText("Email Tag");
      165 |   expect(tags).toHaveLength(2);
    > 166 |   userEvent.click(tags[0]);
          |             ^
      167 |
      168 |   tags = await screen.findAllByLabelText("Email Tag");
      169 |   expect(tags).toHaveLength(1);

      at onBlur (node_modules/@headlessui/react/dist/headlessui.dev.cjs:1815:33)
      ...

I've traced it to https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/focus-trap/focus-trap.tsx#L115-L118 which looks like it was added in #2093 which was released in 1.7.6.

If I change my test from userEvent.click to fireEvent.click it works fine. The difference being userEvent propagates the event through the event chain, like it would in a browser, which I assume is being caught by the focus trap and breaking.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Is your jest setup so that it includes a DOM (using jsdom or similar)?
Can you attach a minimal reproduction repo so that we can take a look?

[mattfelten]

Yeah, the environment is set to jsdom. I'll try to set up a mini-demo this weekend.

[mizozobu]

I started facing this at v1.7.5. v1.7.4 works for me.

[RobinMalfait]

@mizozobu can you create a minimal reproduction?

[RobinMalfait]

I should trust the type system a bit more!
This should be fixed by #2203, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.

[mattfelten]

Awesome! Thank you. Just out of curiosity, do you know what other types relatedTarget can be besides HTMLElement and null?