Spotlight generates "null is not an object (evaluating 'actionsList.querySelector')" error in some cases

[DenisBessa]

What package has an issue

@mantine/spotlight

Describe the bug

In the file below, the definition of actionList contains a non-null assertion operator.

But in sometimes, it can be null. I was able to reproduce this on a Next.js App with experimental.serverActions = true.

Even though it looks like it is a Next.js specific problem, I think the solution is pretty simple, and can maybe avoid errors in other frameworks as well.

What version of @mantine/* packages do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)

7.1.2

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

  const actionsList = document.getElementById(state.listId);
  const selected = actionsList?.querySelector<HTMLButtonElement>('[data-selected]');
  const actions = actionsList?.querySelectorAll<HTMLButtonElement>('[data-action]');

[rtivital]

You are welcome to submit a PR with a fix

Note that changing it to const actionsList = document.getElementById(state.listId); will not resolve the issue because ! is used only for TypeScript and this type information is not relevant to the error mentioned in the issue.