focus-trap-react 9.0.1 → 9.0.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 9.0.2
+
+### Patch Changes
+
+- 4d8e041: Fix an issue when running in strict mode which has React immediately unmount/remount the trap, causing it to deactivate and then have to reactivate (per existing component state) on the remount. [#720](https://github.com/focus-trap/focus-trap-react/issues/720)
+
 ## 9.0.1
 
 ### Patch Changes

package/README.md

@@ -1,7 +1,7 @@
 # focus-trap-react [![CI](https://github.com/focus-trap/focus-trap-react/workflows/CI/badge.svg?branch=master&event=push)](https://github.com/focus-trap/focus-trap-react/actions?query=workflow:CI+branch:master) [![Codecov](https://img.shields.io/codecov/c/github/focus-trap/focus-trap-react)](https://codecov.io/gh/focus-trap/focus-trap-react) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-23-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-24-orange.svg?style=flat-square)](#contributors)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 A React component that traps focus.
@@ -214,19 +214,20 @@ In alphabetical order:
     <td align="center"><a href="http://kathleenmcmahon.dev/"><img src="https://avatars1.githubusercontent.com/u/11621935?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kathleen McMahon</b></sub></a><br /><a href="#maintenance-resource11" title="Maintenance">🚧</a></td>
     <td align="center"><a href="https://github.com/LoganDark"><img src="https://avatars.githubusercontent.com/u/4723091?v=4?s=100" width="100px;" alt=""/><br /><sub><b>LoganDark</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3ALoganDark" title="Bug reports">🐛</a></td>
     <td align="center"><a href="https://marais.io/"><img src="https://avatars2.githubusercontent.com/u/599459?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Marais Rossouw</b></sub></a><br /><a href="#infra-maraisr" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="https://www.moroshko.me"><img src="https://avatars.githubusercontent.com/u/259753?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Misha Moroshko</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Amoroshko" title="Bug reports">🐛</a></td>
     <td align="center"><a href="https://github.com/liunate"><img src="https://avatars2.githubusercontent.com/u/38996291?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nate Liu</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=liunate" title="Tests">⚠️</a></td>
-    <td align="center"><a href="https://www.linkedin.com/in/rivajunior/"><img src="https://avatars1.githubusercontent.com/u/11370172?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rivaldo Junior</b></sub></a><br /><a href="#maintenance-rivajunior" title="Maintenance">🚧</a></td>
   </tr>
   <tr>
+    <td align="center"><a href="https://www.linkedin.com/in/rivajunior/"><img src="https://avatars1.githubusercontent.com/u/11370172?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rivaldo Junior</b></sub></a><br /><a href="#maintenance-rivajunior" title="Maintenance">🚧</a></td>
     <td align="center"><a href="https://scottrippey.github.io/"><img src="https://avatars3.githubusercontent.com/u/430608?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Scott Rippey</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=scottrippey" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Ascottrippey" title="Bug reports">🐛</a></td>
     <td align="center"><a href="https://seanmcp.com/"><img src="https://avatars1.githubusercontent.com/u/6360367?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sean McPherson</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=SeanMcP" title="Code">💻</a></td>
     <td align="center"><a href="http://smoores.dev"><img src="https://avatars.githubusercontent.com/u/5354254?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shane Moore</b></sub></a><br /><a href="#platform-SMores" title="Packaging/porting to new platform">📦</a></td>
     <td align="center"><a href="https://recollectr.io"><img src="https://avatars2.githubusercontent.com/u/6835891?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Slapbox</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=Slapbox" title="Documentation">📖</a> <a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3ASlapbox" title="Bug reports">🐛</a></td>
     <td align="center"><a href="https://stefancameron.com/"><img src="https://avatars3.githubusercontent.com/u/2855350?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Stefan Cameron</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=stefcameron" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Astefcameron" title="Bug reports">🐛</a> <a href="#infra-stefcameron" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=stefcameron" title="Tests">⚠️</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=stefcameron" title="Documentation">📖</a> <a href="#maintenance-stefcameron" title="Maintenance">🚧</a></td>
     <td align="center"><a href="http://tylerhawkins.info/201R/"><img src="https://avatars0.githubusercontent.com/u/13806458?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tyler Hawkins</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=thawkin3" title="Documentation">📖</a> <a href="#example-thawkin3" title="Examples">💡</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=thawkin3" title="Tests">⚠️</a> <a href="#tool-thawkin3" title="Tools">🔧</a></td>
-    <td align="center"><a href="https://github.com/wandroll"><img src="https://avatars.githubusercontent.com/u/4492317?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Wandrille Verlut</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=wandroll" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=wandroll" title="Tests">⚠️</a></td>
   </tr>
   <tr>
+    <td align="center"><a href="https://github.com/wandroll"><img src="https://avatars.githubusercontent.com/u/4492317?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Wandrille Verlut</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=wandroll" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=wandroll" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://github.com/krikienoid"><img src="https://avatars3.githubusercontent.com/u/8528227?v=4?s=100" width="100px;" alt=""/><br /><sub><b>krikienoid</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Akrikienoid" title="Bug reports">🐛</a></td>
     <td align="center"><a href="https://github.com/syntactic-salt"><img src="https://avatars.githubusercontent.com/u/9385662?v=4?s=100" width="100px;" alt=""/><br /><sub><b>syntactic-salt</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Asyntactic-salt" title="Bug reports">🐛</a></td>
   </tr>

package/dist/focus-trap-react.js

@@ -299,7 +299,28 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "setupFocusTrap",
     value: function setupFocusTrap() {
-      if (!this.focusTrap) {
+      if (this.focusTrap) {
+        // trap already exists: it's possible we're in StrictMode and we're being remounted,
+        //  in which case, we will have deactivated the trap when we got unmounted (remember,
+        //  StrictMode, in development, purposely unmounts and remounts components after
+        //  mounting them the first time to make sure they have reusable state,
+        //  @see https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state) so now
+        //  we need to restore the state of the trap according to our component state
+        // NOTE: Strict mode __violates__ assumptions about the `componentWillUnmount()` API
+        //  which clearly states -- even for React 18 -- that, "Once a component instance is
+        //  unmounted, __it will never be mounted again.__" (emphasis ours). So when we get
+        //  unmounted, we assume we're gone forever and we deactivate the trap. But then
+        //  we get remounted and we're supposed to restore state. But if you had paused,
+        //  we've now deactivated (we don't know we're amount to get remounted again)
+        //  which means we need to reactivate and then pause. Otherwise, do nothing.
+        if (this.props.active && !this.focusTrap.active) {
+          this.focusTrap.activate();
+
+          if (this.props.paused) {
+            this.focusTrap.pause();
+          }
+        }
+      } else {
         var nodesExist = this.focusTrapElements.some(Boolean);
 
         if (nodesExist) {
@@ -448,6 +469,7 @@ FocusTrap.propTypes = {
     })
   }),
   containerElements: PropTypes.arrayOf(PropTypes.instanceOf(ElementType)),
+  // DOM element ONLY
   children: PropTypes.oneOfType([PropTypes.element, // React element
   PropTypes.instanceOf(ElementType) // DOM element
   ]) // NOTE: _createFocusTrap is internal, for testing purposes only, so we don't

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap-react",
-  "version": "9.0.1",
+  "version": "9.0.2",
   "description": "A React component that traps focus.",
   "main": "dist/focus-trap-react.js",
   "types": "index.d.ts",
@@ -14,8 +14,8 @@
     "index.d.ts"
   ],
   "scripts": {
-    "demo-bundle": "browserify demo/js -t babelify --extension=.jsx -o demo/demo-bundle.js",
-    "start": "yarn build && budo demo/js/index.js:demo-bundle.js --dir demo --live -- -t babelify --extension=.jsx",
+    "demo-bundle": "NODE_ENV=production browserify demo/js -t babelify --extension=.jsx -o demo/demo-bundle.js",
+    "start": "yarn build && NODE_ENV=development budo demo/js/index.js:demo-bundle.js --dir demo --live -- -t babelify --extension=.jsx",
     "lint": "eslint \"*.js\" \"src/**/*.js\" \"test/**/*.js\" \"demo/**/*.js\" \"cypress/**/*.js\"",
     "format": "prettier --write \"{*,src/**/*,test/**/*,demo/js/**/*,.github/workflows/*,cypress/**/*}.+(js|yml)\"",
     "format:check": "prettier --check \"{*,src/**/*,test/**/*,demo/js/**/*,.github/workflows/*,cypress/**/*}.+(js|yml)\"",
@@ -24,10 +24,10 @@
     "test:types": "tsc index.d.ts",
     "test:unit": "jest",
     "test:coverage": "jest --coverage",
-    "test:cypress": "start-server-and-test start 9966 'cypress open'",
-    "test:cypress:ci": "start-server-and-test start 9966 'cypress run --browser $CYPRESS_BROWSER --headless'",
-    "test:chrome": "CYPRESS_BROWSER=chrome yarn test:cypress:ci",
-    "test": "yarn format:check && yarn lint && yarn test:unit && yarn test:types && CYPRESS_BROWSER=chrome yarn test:cypress:ci",
+    "test:e2e": "ELECTRON_ENABLE_LOGGING=1 start-server-and-test start 9966 'cypress run --browser $CYPRESS_BROWSER --headless'",
+    "test:e2e:chrome": "CYPRESS_BROWSER=chrome yarn test:e2e",
+    "test:e2e:dev": "ELECTRON_ENABLE_LOGGING=1 start-server-and-test start 9966 'cypress open --browser --e2e'",
+    "test": "yarn format:check && yarn lint && yarn test:unit && yarn test:types && yarn test:e2e:chrome",
     "prepare": "yarn build",
     "prepublishOnly": "yarn test && yarn build",
     "release": "yarn build && changeset publish"
@@ -58,12 +58,12 @@
   "homepage": "https://github.com/focus-trap/focus-trap-react#readme",
   "devDependencies": {
     "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.18.2",
+    "@babel/core": "^7.18.5",
     "@babel/eslint-parser": "^7.18.2",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
-    "@changesets/cli": "^2.22.0",
+    "@changesets/cli": "^2.23.0",
     "@testing-library/cypress": "^8.0.3",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.4",
@@ -75,7 +75,7 @@
     "babelify": "^10.0.0",
     "browserify": "^17.0.0",
     "budo": "^11.7.0",
-    "cypress": "^9.7.0",
+    "cypress": "^10.1.0",
     "cypress-plugin-tab": "^1.0.5",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
@@ -86,10 +86,10 @@
     "jest-environment-jsdom": "^28.1.1",
     "jest-watch-typeahead": "^1.1.0",
     "onchange": "^7.1.0",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.0",
     "prop-types": "^15.8.1",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "regenerator-runtime": "^0.13.9",
     "start-server-and-test": "^1.14.0",
     "typescript": "^4.7.3"

package/src/focus-trap-react.js

@@ -270,7 +270,27 @@ class FocusTrap extends React.Component {
   }
 
   setupFocusTrap() {
-    if (!this.focusTrap) {
+    if (this.focusTrap) {
+      // trap already exists: it's possible we're in StrictMode and we're being remounted,
+      //  in which case, we will have deactivated the trap when we got unmounted (remember,
+      //  StrictMode, in development, purposely unmounts and remounts components after
+      //  mounting them the first time to make sure they have reusable state,
+      //  @see https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state) so now
+      //  we need to restore the state of the trap according to our component state
+      // NOTE: Strict mode __violates__ assumptions about the `componentWillUnmount()` API
+      //  which clearly states -- even for React 18 -- that, "Once a component instance is
+      //  unmounted, __it will never be mounted again.__" (emphasis ours). So when we get
+      //  unmounted, we assume we're gone forever and we deactivate the trap. But then
+      //  we get remounted and we're supposed to restore state. But if you had paused,
+      //  we've now deactivated (we don't know we're amount to get remounted again)
+      //  which means we need to reactivate and then pause. Otherwise, do nothing.
+      if (this.props.active && !this.focusTrap.active) {
+        this.focusTrap.activate();
+        if (this.props.paused) {
+          this.focusTrap.pause();
+        }
+      }
+    } else {
       const nodesExist = this.focusTrapElements.some(Boolean);
       if (nodesExist) {
         // eslint-disable-next-line react/prop-types -- _createFocusTrap is an internal prop
@@ -437,7 +457,7 @@ FocusTrap.propTypes = {
       getShadowRoot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     }),
   }),
-  containerElements: PropTypes.arrayOf(PropTypes.instanceOf(ElementType)),
+  containerElements: PropTypes.arrayOf(PropTypes.instanceOf(ElementType)), // DOM element ONLY
   children: PropTypes.oneOfType([
     PropTypes.element, // React element
     PropTypes.instanceOf(ElementType), // DOM element