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} + +
+); }; 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 ( ++ {ModalFocusOnDestroyExampleSource} + +