diff --git a/src/Modal.js b/src/Modal.js
index 3989cb68f5..1281304fb4 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -126,6 +126,8 @@ const Modal = React.createClass({
domUtils.ownerDocument(this).body;
container.className += container.className.length ? ' modal-open' : 'modal-open';
+ this.focusModalContent();
+
if (this.props.backdrop) {
this.iosClickHack();
}
@@ -142,6 +144,8 @@ const Modal = React.createClass({
let container = (this.props.container && React.findDOMNode(this.props.container)) ||
domUtils.ownerDocument(this).body;
container.className = container.className.replace(/ ?modal-open/, '');
+
+ this.restoreLastFocus();
},
handleBackdropClick(e) {
@@ -156,6 +160,19 @@ const Modal = React.createClass({
if (this.props.keyboard && e.keyCode === 27) {
this.props.onRequestHide();
}
+ },
+
+ focusModalContent () {
+ this.lastFocus = document.activeElement;
+ let modalContent = React.findDOMNode(this.refs.modal);
+ modalContent.focus();
+ },
+
+ restoreLastFocus () {
+ if (this.lastFocus) {
+ this.lastFocus.focus();
+ this.lastFocus = null;
+ }
}
});
diff --git a/test/ModalSpec.js b/test/ModalSpec.js
index eeafc6d004..c4ee1d38ff 100644
--- a/test/ModalSpec.js
+++ b/test/ModalSpec.js
@@ -97,4 +97,65 @@ describe('Modal', function () {
assert.match(dialog.props.className, /\btestCss\b/);
});
+ describe('Focused state', function () {
+ let focusableContainer = null;
+ beforeEach(function () {
+ focusableContainer = document.createElement('div');
+ focusableContainer.tabIndex = 0;
+ document.body.appendChild(focusableContainer);
+ focusableContainer.focus();
+ });
+
+ afterEach(function () {
+ React.unmountComponentAtNode(focusableContainer);
+ document.body.removeChild(focusableContainer);
+ });
+
+ it('Should focus on the Modal when it is opened', function (done) {
+ document.activeElement.should.equal(focusableContainer);
+
+ let doneOp = function () {
+ // focus should be back on the previous element when modal closed
+ setTimeout(function () {
+ document.activeElement.should.equal(focusableContainer);
+ done();
+ }, 0);
+ };
+
+ let Container = React.createClass({
+ getInitialState() {
+ return {modalOpen: true};
+ },
+ handleCloseModal() {
+ this.setState({modalOpen: false});
+ doneOp();
+ },
+ render() {
+ if (this.state.modalOpen) {
+ return (
+
+ Message
+
+ );
+ } else {
+ return ;
+ }
+ }
+ });
+
+ let instance = React.render(, focusableContainer);
+
+ setTimeout(function () {
+ // modal should be focused when opened
+ let modal = instance.getDOMNode().getElementsByClassName('modal')[0];
+ document.activeElement.should.equal(modal);
+
+ // close the modal
+ let backdrop = instance.getDOMNode().getElementsByClassName('modal-backdrop')[0];
+ ReactTestUtils.Simulate.click(backdrop);
+ }, 0);
+ });
+
+ });
+
});