fix: speedup resolution for auto-guards

src/Trap.js

@@ -130,7 +130,11 @@ const activateTrap = () => {
         }
       }
 
-      if (document) {
+      if (document
+          // element was changed
+          && activeElement !== document.activeElement
+          // fast check for any auto-guard
+          && document.querySelector('[data-focus-auto-guard]')) {
         const newActiveElement = document && document.activeElement;
         const allNodes = expandFocusableNodes(workingArea);
         const focusedIndex = allNodes.map(({ node }) => node).indexOf(newActiveElement);

stories/Group.js

@@ -1,111 +1,127 @@
-import * as React from "react";
-import { Component } from "react";
-import FocusLock, {InFocusGuard} from "../src/index";
+import * as React from 'react';
+import { Component } from 'react';
+import FocusLock, { InFocusGuard } from '../src/index';
 
 const styles = {
-  fontFamily: "sans-serif",
-  textAlign: "center",
-  fontSize: "16px"
+  fontFamily: 'sans-serif',
+  textAlign: 'center',
+  fontSize: '16px',
 };
 
 const bg = {
-  backgroundColor: '#FEE'
+  backgroundColor: '#FEE',
 };
 
 class Trap1 extends Component {
   state = {
-    disabled: true
+    disabled: true,
   };
 
   toggle = () => {
     setTimeout(() => {
-      this.setState({disabled: !this.state.disabled});
+      this.setState({ disabled: !this.state.disabled });
     }, 10);
   };
 
   render() {
-    const {disabled} = this.state;
+    const { disabled } = this.state;
     return (
       <div>
         <button>Button</button>
-        <div style={{marginTop: '70vh'}}>
+        <div style={{ marginTop: '70vh' }}>
           <button onClick={this.toggle}>!ACTIVATE THE TRAP!</button>
         </div>
 
-        {!disabled && <FocusLock returnFocus group="g1">
+        {!disabled && (
+        <FocusLock returnFocus group="g1">
           <button>BUTTON</button>
-          <a href='#'>link somethere</a> <br/>
+          <a href="#">link somethere</a>
+          {' '}
+          <br />
           <button onClick={this.toggle}>DEACTIVATE</button>
         </FocusLock>
+        )
         }
         some text outsite
-        <div style={{marginTop: '70vh'}}>
+        <div style={{ marginTop: '70vh' }}>
           <button>Button</button>
         </div>
         some text outsite
-        {!disabled && <FocusLock returnFocus group="g1">
+        {!disabled && (
+        <FocusLock returnFocus group="g1">
           <button>BUTTON</button>
-          <a href='#'>link somethere</a> <br/>
+          <a href="#">link somethere</a>
+          {' '}
+          <br />
           <button onClick={this.toggle}>DEACTIVATE</button>
         </FocusLock>
+        )
         }
       </div>
-    )
+    );
   }
 }
 
 export class ShardGroupCase extends React.Component {
   ref1 = React.createRef();
+
   ref2 = React.createRef();
+
   state = {
-    disabled: true
+    disabled: true,
   };
 
   toggle = () => {
     setTimeout(() => {
-      this.setState({disabled: !this.state.disabled});
+      this.setState({ disabled: !this.state.disabled });
     }, 10);
   };
 
   render() {
-    const {disabled} = this.state;
+    const { disabled } = this.state;
     return (
       <div>
         <button>Button</button>
-        <div style={{marginTop: '70vh'}}>
-          <button onClick={this.toggle}>!ACTIVATE THE TRAP!</button>
+        <div style={{ marginBottom: '70vh' }}>
+          <button onClick={this.toggle} onFocus={() => console.log('wrong button focused!')}>!ACTIVATE THE TRAP!</button>
         </div>
 
-        <InFocusGuard>
-          <button>Button1</button>
-        </InFocusGuard>
+        {/* <InFocusGuard> */}
+        {/*  <button>Button1</button> */}
+        {/* </InFocusGuard> */}
         <InFocusGuard>
           <button ref={this.ref1}>Button2</button>
         </InFocusGuard>
         <InFocusGuard>
           <button>Button3</button>
         </InFocusGuard>
 
-        {!disabled && <FocusLock returnFocus shards={[this.ref1.current, this.ref2.current]}>
+        {!disabled && (
+        <FocusLock returnFocus shards={[this.ref1.current, this.ref2.current]}>
           <button>BUTTON</button>
-          <a href='#'>link somethere</a> <br/>
+          <a href="#">link somethere</a>
+          {' '}
+          <br />
           <button onClick={this.toggle}>DEACTIVATE</button>
         </FocusLock>
+        )
         }
         some text outsite
-        <div style={{marginTop: '70vh'}}>
+        <div style={{ marginTop: '70vh' }}>
           <button>Button</button>
         </div>
         some text outsite
         <div ref={this.ref2}>
           <button>BUTTON</button>
-          <a href='#'>link somethere</a> <br/>
+          <a href="#">link somethere</a>
+          {' '}
+          <br />
           <button onClick={this.toggle}>DEACTIVATE</button>
         </div>
         <button>button outside</button>
       </div>
-    )
+    );
   }
 }
 
-export const GroupCase = () => <div><Trap1/></div>;
+export const GroupCase = () => <div><Trap1 /></div>;