Reakit: isFocusTrap errors in Firefox

[Regaddi]

🐛 Bug report

Current behavior

When including a Dialog that should open immediately on page load (without a trigger), Firefox raises an error element.classList is undefined.
isFocusTrap seems to be called with document which is not an HTMLElement in Firefox, therefore does not have the classList property set.

Steps to reproduce the bug

Provide a repo or sandbox with the bug and describe the steps to reproduce it.

1. Open sandbox in Firefox: https://codesandbox.io/s/distracted-breeze-nqeyz
2. Click to close the Dialog

Expected behavior

There shouldn't be an error raised.

Possible solutions

isFocusTrap should add a check if element.classList exists.

export function isFocusTrap(element: Element) {
  return element.classList?.contains(focusTrapClassName);
  // or
  // return element.classList && element.classList.contains(focusTrapClassName);
}

[diegohaz]

Thanks for the report, @Regaddi! Would you like to send a PR?

[Regaddi]

@diegohaz Sure! I'll try to do so this evening or tomorrow morning :+1:

[Regaddi]

@diegohaz
I'm having issues with eslint:

# yarn lint
yarn run v1.21.1
$ eslint . --ext js,ts,tsx
Error: EISDIR: illegal operation on a directory, read
Occurred while linting /Workspace/github/reakit/babel.config.js:1
    at Object.readSync (fs.js:532:3)
    at tryReadSync (fs.js:347:20)
    at Object.readFileSync (fs.js:384:19)
    at Function.readFileSync [as sync] (/Workspace/github/reakit/node_modules/prettier/third-party.js:4333:15)
    at Explorer.loadSearchPlaceSync (/Workspace/github/reakit/node_modules/prettier/third-party.js:4659:32)
    at Explorer.searchDirectorySync (/Workspace/github/reakit/node_modules/prettier/third-party.js:4618:25)
    at run (/Workspace/github/reakit/node_modules/prettier/third-party.js:4575:29)
    at cacheWrapper (/Workspace/github/reakit/node_modules/prettier/third-party.js:4358:16)
    at Explorer.searchFromDirectorySync (/Workspace/github/reakit/node_modules/prettier/third-party.js:4587:16)
    at run (/Workspace/github/reakit/node_modules/prettier/third-party.js:4580:25)
error Command failed with exit code 2.

When trying to commit:

✖ eslint found some errors. Please fix them and try committing again.

Error: EISDIR: illegal operation on a directory, read
Occurred while linting /Workspace/github/reakit/packages/reakit/src/Dialog/__utils/useFocusTrap.ts:1
  at Object.readSync (fs.js:532:3)
  at tryReadSync (fs.js:347:20)
  at Object.readFileSync (fs.js:384:19)
  at Function.readFileSync [as sync] (/Workspace/github/reakit/node_modules/prettier/third-party.js:4333:15)
  at Explorer.loadSearchPlaceSync (/Workspace/github/reakit/node_modules/prettier/third-party.js:4659:32)
  at Explorer.searchDirectorySync (/Workspace/github/reakit/node_modules/prettier/third-party.js:4618:25)
  at run (/Workspace/github/reakit/node_modules/prettier/third-party.js:4575:29)
  at cacheWrapper (/Workspace/github/reakit/node_modules/prettier/third-party.js:4358:16)
  at Explorer.searchFromDirectorySync (/Workspace/github/reakit/node_modules/prettier/third-party.js:4587:16)
  at run (/Workspace/github/reakit/node_modules/prettier/third-party.js:4580:25)
husky > pre-commit hook failed (add --no-verify to bypass)

Unfortunately I don't have the time to try and fix this issue.
Here's the change I made:

diff --git a/packages/reakit/src/Dialog/__utils/useFocusTrap.ts b/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
index 0670a41..945d03f 100644
--- a/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
+++ b/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
@@ -24,7 +24,7 @@ function hasNestedOpenModals(
 const focusTrapClassName = "__reakit-focus-trap";

 export function isFocusTrap(element: Element) {
-  return element.classList.contains(focusTrapClassName);
+  return element.classList?.contains(focusTrapClassName);
 }

[diegohaz]

No idea what this is issue is, but you can commit with the —no-verify flag.