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 ( -