feat: add crossFrame property to control iframe behaviour, fixes #104

Author: theKashey

interfaces.d.ts

@@ -24,6 +24,14 @@ export interface ReactFocusLockProps<ChildrenType = React.ReactNode, LockProps=R
    */
   persistentFocus?: boolean;
 
+  /**
+   * enables aggressive focus capturing within iframes
+   * - once disabled allows focus to move outside of iframe, if enabled inside iframe
+   * - once enabled keep focus in the lock, no matter where lock is active (default)
+   * @default true
+   */
+  crossFrame: boolean;
+
   /**
    * enables or disables autoFocusing feature.
    * If enabled - will move focus inside Lock, selecting the first or autoFocusable element

src/Lock.js

@@ -21,6 +21,7 @@ const FocusLock = React.forwardRef((props, parentRef) => {
     disabled,
     noFocusGuards,
     persistentFocus,
+    crossFrame,
     autoFocus,
     allowTextSelection,
     group,
@@ -132,6 +133,7 @@ const FocusLock = React.forwardRef((props, parentRef) => {
           observed={realObserved}
           disabled={disabled}
           persistentFocus={persistentFocus}
+          crossFrame={crossFrame}
           autoFocus={autoFocus}
           whiteList={whiteList}
           shards={shards}
@@ -166,6 +168,7 @@ FocusLock.propTypes = {
   allowTextSelection: bool,
   autoFocus: bool,
   persistentFocus: bool,
+  crossFrame: bool,
 
   group: string,
   className: string,
@@ -189,6 +192,7 @@ FocusLock.defaultProps = {
   noFocusGuards: false,
   autoFocus: true,
   persistentFocus: false,
+  crossFrame: true,
   allowTextSelection: undefined,
   group: undefined,
   className: undefined,

src/Trap.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import withSideEffect from 'react-clientside-effect';
-import moveFocusInside, { focusInside, focusIsHidden, getFocusabledIn } from 'focus-lock';
-import { deferAction } from './util';
-import { mediumFocus, mediumBlur, mediumEffect } from './medium';
+import moveFocusInside, {focusInside, focusIsHidden, getFocusabledIn} from 'focus-lock';
+import {deferAction} from './util';
+import {mediumFocus, mediumBlur, mediumEffect} from './medium';
 
 const focusOnBody = () => (
   document && document.activeElement === document.body
@@ -25,7 +25,7 @@ const focusWhitelisted = activeElement => (
 );
 
 const recordPortal = (observerNode, portaledElement) => {
-  lastPortaledElement = { observerNode, portaledElement };
+  lastPortaledElement = {observerNode, portaledElement};
 };
 
 const focusIsPortaledPair = element => (
@@ -58,11 +58,20 @@ function autoGuard(startIndex, end, step, allNodes) {
 
 const extractRef = ref => ((ref && 'current' in ref) ? ref.current : ref);
 
+const focusWasOutside = (crossFrameOption) => {
+  if(crossFrameOption){
+    // with cross frame return true for any value
+    return Boolean(focusWasOutsideWindow);
+  }
+  // in other case return only of focus went a while aho
+  return focusWasOutsideWindow === "meanwhile"
+}
+
 const activateTrap = () => {
   let result = false;
   if (lastActiveTrap) {
     const {
-      observed, persistentFocus, autoFocus, shards,
+      observed, persistentFocus, autoFocus, shards, crossFrame,
     } = lastActiveTrap;
     const workingNode = observed || (lastPortaledElement && lastPortaledElement.portaledElement);
     const activeElement = document && document.activeElement;
@@ -74,7 +83,7 @@ const activateTrap = () => {
 
       if (!activeElement || focusWhitelisted(activeElement)) {
         if (
-          (persistentFocus || focusWasOutsideWindow)
+          (persistentFocus || focusWasOutside(crossFrame))
           || !isFreeFocus()
           || (!lastActiveFocus && autoFocus)
         ) {
@@ -101,12 +110,12 @@ const activateTrap = () => {
       if (document) {
         const newActiveElement = document && document.activeElement;
         const allNodes = getFocusabledIn(workingArea);
-        const focusedItem = allNodes.find(({ node }) => node === newActiveElement);
+        const focusedItem = allNodes.find(({node}) => node === newActiveElement);
         if (focusedItem) {
           // remove old focus
           allNodes
-            .filter(({ guard, node }) => guard && node.dataset.focusAutoGuard)
-            .forEach(({ node }) => node.removeAttribute('tabIndex'));
+            .filter(({guard, node}) => guard && node.dataset.focusAutoGuard)
+            .forEach(({node}) => node.removeAttribute('tabIndex'));
 
           const focusedIndex = allNodes.indexOf(focusedItem);
           autoGuard(focusedIndex, allNodes.length, +1, allNodes);
@@ -141,7 +150,7 @@ const onFocus = (event) => {
 
 const FocusWatcher = () => null;
 
-const FocusTrap = ({ children }) => (
+const FocusTrap = ({children}) => (
   <div onBlur={onBlur} onFocus={onFocus}>
     {children}
   </div>
@@ -152,7 +161,11 @@ FocusTrap.propTypes = {
 };
 
 const onWindowBlur = () => {
-  focusWasOutsideWindow = true;
+  focusWasOutsideWindow = "just";
+  // using setTimeout to set  this variable after React/sidecar reaction
+  setTimeout(() => {
+    focusWasOutsideWindow = "meanwhile";
+  }, 0);
 };
 
 const attachHandler = () => {
@@ -169,7 +182,7 @@ const detachHandler = () => {
 
 function reducePropsToState(propsList) {
   return propsList
-    .filter(({ disabled }) => !disabled);
+    .filter(({disabled}) => !disabled);
 }
 
 function handleStateChangeOnClient(traps) {
@@ -186,7 +199,7 @@ function handleStateChangeOnClient(traps) {
   if (lastTrap && !sameTrap) {
     lastTrap.onDeactivation();
     // return focus only of last trap was removed
-    if (!traps.filter(({ id }) => id === lastTrap.id).length) {
+    if (!traps.filter(({id}) => id === lastTrap.id).length) {
       // allow defer is no other trap is awaiting restore
       lastTrap.returnFocus(!trap);
     }

stories/Default.js

@@ -21,8 +21,12 @@ class Trap extends Component {
 
   render() {
     const {disabled} = this.state;
+    const query = (new URL(document.location)).searchParams;
     return (
-      <FocusLock disabled={this.state.disabled}>
+      <FocusLock
+        disabled={this.state.disabled}
+        crossFrame={query.get('crossFrame')==="true"}
+      >
         {disabled && <div>
           ! this is a <b>real trap</b>.<br/>
           We will steal your focus ! <br /><br />

stories/Iframe.js

@@ -21,6 +21,7 @@ class Trap extends Component {
 
   render() {
     const {disabled} = this.state;
+    const {crossFrame} = this.props;
     return (
       <FocusLock disabled={this.state.disabled}>
         {disabled && <div>
@@ -34,7 +35,7 @@ class Trap extends Component {
         You will cycle over this. Never leaving <br/>
         <input placeholder="input1"/>
 
-        <iframe src="/" style={{width:'100%', height: '60%'}}/>
+        <iframe src={`/iframe.html?id=focus-lock--codesandbox-example&crossFrame=${crossFrame}`} style={{width:'100%', height: '400px'}}/>
 
         <input placeholder="input2"/>
 
@@ -49,11 +50,11 @@ class Trap extends Component {
   }
 }
 
-const App = () =>
+const App = (props) =>
   <div style={styles}>
     <input placeholder="input1"/>
     <div style={bg}> Inaccessible <a href='#'>Link</a> outside</div>
-    <Trap />
+    <Trap {...props} />
     <div style={bg}> Inaccessible <a href='#'>Link</a> outside</div>
     <input placeholder="input1"/>
   </div>;

stories/Jump.js

@@ -32,6 +32,8 @@ class Trap1 extends Component {
           <button onClick={this.toggle}>!ACTIVATE THE TRAP!</button>
         </div>
 
+        <p>hint: guards are disabled</p>
+
         {!disabled && <FocusLock returnFocus noFocusGuards>
           <button>BUTTON-2</button>
           <a href='#'>link somethere</a> <br/>

stories/index.js

@@ -32,7 +32,7 @@ const frameStyle = {
 const Frame = ({children}) => (<div style={frameStyle}>{children}</div>);
 
 storiesOf('Focus lock', module)
-  .add('codesanbox example', () => <Frame><DefaultAll/></Frame>)
+  .add('codesandbox example', () => <Frame><DefaultAll/></Frame>)
   .add('TabIndex example', () => <Frame><TabIndex/></Frame>)
   .add('autofocus', () => <Frame><AutoFocus/></Frame>)
   .add('return focus', () => <Frame><ReturnFocus/></Frame>);
@@ -77,6 +77,7 @@ storiesOf('Disabled', module)
 
 storiesOf('Excotic', module)
   .add('video', () => <Frame><Video/></Frame>)
-  .add('iframe', () => <Frame><Iframe/></Frame>)
+  .add('iframe - crossframe', () => <Frame><Iframe crossFrame/></Frame>)
+  .add('iframe - free', () => <Frame><Iframe crossFrame={false}/></Frame>)
   .add('sidecar', () => <Frame><SideCar/></Frame>)
   .add('tabbable parent', () => <Frame><TabbableParent/></Frame>);