focus-trap-react - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

CHANGELOG.md

@@ -1,8 +0,12 @@
-# CHANGELOG
+# Changelog
 
-# 3.0.1
+## 3.0.2
 
+- Fix handling of `focusTrapOptions.returnFocusOnDeactivate` for React-specific kinks like `autoFocus` on inputs.
+
+## 3.0.1
+
 - Upgrade `focus-trap` for important bug fix.
 
-# 3.0.0
+## 3.0.0
 
@@ -12,7 +16,7 @@ - Introduce `focusTrapOptions` prop (and remove redundancies).
 
-# 2.1.1
+## 2.1.1
 
 - Allow React 15 as peer dependency.
 
-# 2.1.0
+## 2.1.0
 
@@ -19,0 +23,0 @@ - Upgrade `focus-trap` to add `escapeDeactivates` and `clickOutsideDeactivates` props.

index.js

@@ -6,6 +6,6 @@ var React = require('react');
 var checkedProps = {
-  active: PropTypes.bool,
-  paused: PropTypes.bool,
-  tag: PropTypes.string,
-  focusTrapOptions: PropTypes.object,
+  active: PropTypes.bool.isRequired,
+  paused: PropTypes.bool.isRequired,
+  tag: PropTypes.string.isRequired,
+  focusTrapOptions: PropTypes.object.isRequired,
 };
@@ -21,7 +21,29 @@
       paused: false,
+      focusTrapOptions: {},
     };
   },
 
+  componentWillMount: function() {
+    if (typeof document !== 'undefined') {
+      this.previouslyFocusedElement = document.activeElement;
+    }
+  },
+
   componentDidMount: function() {
-    this.focusTrap = createFocusTrap(this.node, this.props.focusTrapOptions);
+    // We need to hijack the returnFocusOnDeactivate option,
+    // because React can move focus into the element before we arrived at
+    // this lifecycle hook (e.g. with autoFocus inputs). So the component
+    // captures the previouslyFocusedElement in componentWillMount,
+    // then (optionally) returns focus to it in componentWillUnmount.
+    var specifiedFocusTrapOptions = this.props.focusTrapOptions;
+    var tailoredFocusTrapOptions = {
+      returnFocusOnDeactivate: false,
+    };
+    for (var optionName in specifiedFocusTrapOptions) {
+      if (!specifiedFocusTrapOptions.hasOwnProperty(optionName)) continue;
+      if (optionName === 'returnFocusOnDeactivate') continue;
+      tailoredFocusTrapOptions[optionName] = specifiedFocusTrapOptions[optionName];
+    }
+
+    this.focusTrap = createFocusTrap(this.node, tailoredFocusTrapOptions);
     if (this.props.active) {
@@ -51,2 +73,5 @@ this.focusTrap.activate();
     this.focusTrap.deactivate();
+    if (this.props.focusTrapOptions.returnFocusOnDeactivate !== false && this.previouslyFocusedElement) {
+      this.previouslyFocusedElement.focus();
+    }
   },
@@ -53,0 +78,0 @@

package.json

 {
   "name": "focus-trap-react",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "A React component that traps focus.",
@@ -9,4 +9,3 @@ "main": "index.js",
     "demo-bundle": "browserify demo/js -t babelify --extension=.jsx -o demo/demo-bundle.js",
-    "demo-watch": "watchify demo/js -d -t babelify --extension=.jsx -o demo/demo-bundle.js",
-    "demo-dev": "npm run demo-watch & http-server demo",
+    "start": "budo demo/js/index.js:demo-bundle.js --dir demo --live -- -t babelify --extension=.jsx",
     "test-dev": "zuul --local 8080 --open -- test/index.js",
@@ -38,14 +37,13 @@ "pretest": "npm run lint",
   "devDependencies": {
-    "babel-preset-react": "6.5.0",
-    "babelify": "7.3.0",
-    "browserify": "13.0.1",
-    "eslint": "2.7.0",
-    "http-server": "^0.9.0",
-    "react": "15.1.0",
-    "react-addons-test-utils": "15.1.0",
-    "react-dom": "15.1.0",
-    "sinon": "1.17.4",
-    "tape": "4.5.1",
-    "watchify": "3.7.0",
-    "zuul": "3.10.1"
+    "babel-preset-react": "^6.5.0",
+    "babelify": "^7.3.0",
+    "browserify": "^13.0.1",
+    "budo": "^9.4.1",
+    "eslint": "^3.13.1",
+    "react": "^15.1.0",
+    "react-addons-test-utils": "^15.1.0",
+    "react-dom": "^15.1.0",
+    "sinon": "^1.17.4",
+    "tape": "^4.5.1",
+    "zuul": "^3.10.1"
   },
@@ -52,0 +50,0 @@ "dependencies": {

README.md

@@ -144,2 +144,4 @@ # focus-trap-react [![Build Status](https://travis-ci.org/davidtheclark/focus-trap-react.svg?branch=0.1.0)](https://travis-ci.org/davidtheclark/focus-trap-react)
 
+Run the demos with `npm start`.
+
 Test with `npm run test-dev`, which will give you a URL to open in your browser. Look at the console log for TAP output.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10569

increased by13.41%

Dev dependency count

11

decreased by-8.33%

Lines of code

80

increased by40.35%

Number of lines in readme file

147

increased by1.38%

No dependency changes