fix: root-close firing immediately in react 17 (#880)

Author: jquense

package.json

@@ -61,11 +61,11 @@
     "conventionalCommits": true
   },
   "dependencies": {
-    "@babel/runtime": "^7.4.5",
-    "@popperjs/core": "^2.0.0",
-    "@restart/hooks": "^0.3.12",
+    "@babel/runtime": "^7.12.1",
+    "@popperjs/core": "^2.5.3",
+    "@restart/hooks": "^0.3.25",
     "@types/warning": "^3.0.0",
-    "dom-helpers": "^5.1.0",
+    "dom-helpers": "^5.2.0",
     "prop-types": "^15.7.2",
     "uncontrollable": "^7.0.0",
     "warning": "^4.0.3"
@@ -91,8 +91,8 @@
     "@types/classnames": "^2.2.10",
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
-    "@typescript-eslint/eslint-plugin": "^4.4.1",
-    "@typescript-eslint/parser": "^4.4.1",
+    "@typescript-eslint/eslint-plugin": "^4.5.0",
+    "@typescript-eslint/parser": "^4.5.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-istanbul": "^6.0.0",
@@ -102,14 +102,14 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "eslint": "^7.11.0",
-    "eslint-config-4catalyzer-typescript": "^2.0.4",
+    "eslint-config-4catalyzer-typescript": "^3.0.1",
     "eslint-config-prettier": "^6.13.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-mocha": "^8.0.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.4",
-    "eslint-plugin-react-hooks": "^4.1.2",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "gh-pages": "^3.1.0",
     "husky": "^4.3.0",
     "jquery": "^3.5.1",
@@ -129,13 +129,13 @@
     "react-dom": "^16.14.0",
     "react-transition-group": "^4.4.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.32.0",
+    "rollup": "^2.32.1",
     "simulant": "^0.2.2",
     "sinon": "^9.2.0",
     "sinon-chai": "^3.5.0",
     "typescript": "^4.0.3",
     "webpack": "^4.44.2",
-    "webpack-atoms": "^13.1.0",
+    "webpack-atoms": "^14.0.0",
     "webpack-cli": "^3.3.12"
   },
   "bugs": {

src/useRootClose.ts

@@ -86,6 +86,10 @@ function useRootClose(
   useEffect(() => {
     if (disabled || ref == null) return undefined;
 
+    // Store the current event to avoid triggering handlers immediately
+    // https://github.com/facebook/react/issues/20074
+    let currentEvent = window.event;
+
     const doc = ownerDocument(getRefTarget(ref));
 
     // Use capture for this listener so it fires before React's listener, to
@@ -98,8 +102,23 @@ function useRootClose(
       true,
     );
 
-    const removeMouseListener = listen(doc as any, clickTrigger, handleMouse);
-    const removeKeyupListener = listen(doc as any, 'keyup', handleKeyUp);
+    const removeMouseListener = listen(doc as any, clickTrigger, (e) => {
+      // skip if this event is the same as the one running when we added the handlers
+      if (e === currentEvent) {
+        currentEvent = undefined;
+        return;
+      }
+      handleMouse(e);
+    });
+
+    const removeKeyupListener = listen(doc as any, 'keyup', (e) => {
+      // skip if this event is the same as the one running when we added the handlers
+      if (e === currentEvent) {
+        currentEvent = undefined;
+        return;
+      }
+      handleKeyUp(e);
+    });
 
     let mobileSafariHackListeners = [] as Array<() => void>;
     if ('ontouchstart' in doc.documentElement) {