diff --git a/src/Trap.js b/src/Trap.js index 590f79a..399b4d7 100644 --- a/src/Trap.js +++ b/src/Trap.js @@ -104,15 +104,13 @@ const activateTrap = () => { const workingNode = observed || (lastPortaledElement && lastPortaledElement.portaledElement); // check if lastActiveFocus is still reachable - if (focusOnBody() && lastActiveFocus) { + if (focusOnBody() && lastActiveFocus && lastActiveFocus !== document.body) { if ( // it was removed !document.body.contains(lastActiveFocus) // or not focusable (this is expensive operation)! || isNotFocusable(lastActiveFocus) ) { - lastActiveFocus = null; - const newTarget = tryRestoreFocus(); if (newTarget) { newTarget.focus(); @@ -159,6 +157,10 @@ const activateTrap = () => { || focusIsPortaledPair(activeElement, workingNode) ) ) { + // in case there no yet selected element(first activation), + // but there is some active element + // and autofocus is off + // - we blur currently active element and move focus to the body if (document && !lastActiveFocus && activeElement && !autoFocus) { // Check if blur() exists, which is missing on certain elements on IE if (activeElement.blur) { @@ -170,9 +172,11 @@ const activateTrap = () => { lastPortaledElement = {}; } } - focusWasOutsideWindow = false; lastActiveFocus = document && document.activeElement; - tryRestoreFocus = captureFocusRestore(lastActiveFocus); + if (lastActiveFocus !== document.body) { + tryRestoreFocus = captureFocusRestore(lastActiveFocus); + } + focusWasOutsideWindow = false; } } diff --git a/stories/Exotic.js b/stories/Exotic.js index c24934a..6748bfa 100644 --- a/stories/Exotic.js +++ b/stories/Exotic.js @@ -2,29 +2,41 @@ import * as React from 'react'; import FocusLock from '../src/index'; export class Video extends React.Component { - state = { - disabled: true, - } + state = { + disabled: true, + } - toggle = () => this.setState({ disabled: !this.state.disabled }); + toggle = () => this.setState({ disabled: !this.state.disabled }); - render() { - const { disabled } = this.state; - return ( -
- - { console.log(node); return false; }}> - - - - -
- ); - } + render() { + const { disabled } = this.state; + return ( +
+ + { + console.log(node); + return false; + }} + > + + + + +
+ ); + } } export const FormOverride = () => ( @@ -36,3 +48,52 @@ export const FormOverride = () => ( ); + + +const ModalWithoutAutoFocus = () => ( +
+ + +
+

Title

+
+ +
+
+ +
+
+ +
+
+
+
+
+); +export const NonAutofocusModal = () => { + const [isOpen, togglerIsOpen] = React.useState(false); + + return ( +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
{isOpen && }
+ +
+ ); +}; diff --git a/stories/index.js b/stories/index.js index 30c4e82..4f77e36 100644 --- a/stories/index.js +++ b/stories/index.js @@ -20,7 +20,7 @@ import { MUISelect, MUISelectWhite } from './MUI'; import Fight from './FocusFighting'; import { StyledComponent, StyledSection } from './Custom'; import { DisabledForm, DisabledFormWithTabIndex } from './Disabled'; -import { FormOverride, Video } from './Exotic'; +import { FormOverride, Video, NonAutofocusModal } from './Exotic'; import { TabbableParent } from './TabbableParent'; import { ControlTrapExample, GroupRowingFocusExample, RowingFocusExample } from './control'; @@ -83,7 +83,8 @@ storiesOf('Exotic', module) .add('iframe - Sandbox', () => ) .add('sidecar', () => ) .add('tabbable parent', () => ) - .add('form override', () => ); + .add('form override', () => ) + .add('non autofocusable', () => ); storiesOf('FocusScope', module) .add('keyboard navigation', () => )