diff --git a/docs/lib/Components/ModalsPage.js b/docs/lib/Components/ModalsPage.js index df8adcec8..e45ecb956 100644 --- a/docs/lib/Components/ModalsPage.js +++ b/docs/lib/Components/ModalsPage.js @@ -12,6 +12,7 @@ import ModalExternalExample from '../examples/ModalExternal'; import ModalCustomCloseIconExample from '../examples/ModalCustomCloseIcon'; import ModalCustomCloseButtonExample from '../examples/ModalCustomCloseButton'; import ModalDestructuringExample from '../examples/ModalDestructuring'; +import ModalFocusAfterClose from '../examples/ModalFocusAfterClose'; const ModalBackdropExampleSource = require('!!raw-loader!../examples/ModalBackdrop'); const ModalCustomCloseButtonExampleSource = require('!!raw-loader!../examples/ModalCustomCloseButton'); @@ -22,6 +23,7 @@ const ModalExternalExampleSource = require('!!raw-loader!../examples/ModalExtern const ModalFadelessExampleSource = require('!!raw-loader!../examples/ModalFadeless'); const ModalNestedExampleSource = require('!!raw-loader!../examples/ModalNested'); const ModalDestructuringExampleSource = require('!!raw-loader!../examples/ModalDestructuring'); +const ModalFocusOnDestroyExampleSource = require('!!raw-loader!../examples/ModalFocusAfterClose'); const ModalsPage = () => { return ( @@ -215,6 +217,20 @@ const ModalsPage = () => { {ModalDestructuringExampleSource} + +

Focus after close

+
+
+
+ +
+
+
+
+         
+           {ModalFocusOnDestroyExampleSource}
+         
+       
); }; diff --git a/docs/lib/examples/ModalFocusAfterClose.js b/docs/lib/examples/ModalFocusAfterClose.js new file mode 100644 index 000000000..9f37f4be8 --- /dev/null +++ b/docs/lib/examples/ModalFocusAfterClose.js @@ -0,0 +1,51 @@ +/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ + +import React from 'react'; +import { Button, Modal, ModalBody, ModalFooter, Label, Input, FormGroup, Form } from 'reactstrap'; + +class ModalFocusAfterClose extends React.Component { + constructor() { + super(); + this.state = { + open: false, + focusAfterClose: true + }; + this.toggle = this.toggle.bind(this); + this.handleSelectChange = this.handleSelectChange.bind(this); + } + + toggle() { + this.setState(({ open }) => ({ open: !open })); + } + + handleSelectChange({target: { value }}) { + this.setState({ focusAfterClose: JSON.parse(value) }); + } + + render() { + return ( +
+
e.preventDefault()}> + + + + + + + + +
+ + + Observe the "Open" button. It will be focused after close when "returnFocusAfterClose" is true and will not be focused if "returnFocusAfterClose" is false. + + + + + +
+ ) + } +} + +export default ModalFocusAfterClose; diff --git a/src/Modal.js b/src/Modal.js index 01f5e9020..2df97fe6e 100644 --- a/src/Modal.js +++ b/src/Modal.js @@ -54,7 +54,8 @@ const propTypes = { PropTypes.string, PropTypes.func, ]), - unmountOnClose: PropTypes.bool + unmountOnClose: PropTypes.bool, + returnFocusAfterClose: PropTypes.bool }; const propsToOmit = Object.keys(propTypes); @@ -77,7 +78,8 @@ const defaultProps = { mountOnEnter: true, timeout: TransitionTimeouts.Fade, // uses standard fade transition }, - unmountOnClose: true + unmountOnClose: true, + returnFocusAfterClose: true }; class Modal extends React.Component { @@ -93,6 +95,7 @@ class Modal extends React.Component { this.handleTab = this.handleTab.bind(this); this.onOpened = this.onOpened.bind(this); this.onClosed = this.onClosed.bind(this); + this.manageFocusAfterClose = this.manageFocusAfterClose.bind(this); this.state = { isOpen: props.isOpen, @@ -281,8 +284,13 @@ class Modal extends React.Component { this._element = null; } + this.manageFocusAfterClose(); + } + + manageFocusAfterClose() { if (this._triggeringElement) { - if (this._triggeringElement.focus) this._triggeringElement.focus(); + const { returnFocusAfterClose } = this.props; + if (this._triggeringElement.focus && returnFocusAfterClose) this._triggeringElement.focus(); this._triggeringElement = null; } } @@ -294,7 +302,7 @@ class Modal extends React.Component { const modalOpenClassNameRegex = new RegExp(`(^| )${modalOpenClassName}( |$)`); document.body.className = document.body.className.replace(modalOpenClassNameRegex, ' ').trim(); } - + this.manageFocusAfterClose(); Modal.openCount = Math.max(0, Modal.openCount - 1); setScrollbarWidth(this._originalBodyPadding);