From 802ef11493bcfc554958b1472c7d493561990ac3 Mon Sep 17 00:00:00 2001
From: Anton Korzunov <thekashey@gmail.com>
Date: Wed, 14 Feb 2024 16:58:28 +1100
Subject: [PATCH] fix: speedup resolution for auto-guards

---
 src/Trap.js      |  6 +++-
 stories/Group.js | 78 +++++++++++++++++++++++++++++-------------------
 2 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/src/Trap.js b/src/Trap.js
index f330667..d48858f 100644
--- a/src/Trap.js
+++ b/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);
diff --git a/stories/Group.js b/stories/Group.js
index c97c153..7e762b7 100644
--- a/stories/Group.js
+++ b/stories/Group.js
@@ -1,84 +1,94 @@
-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>
@@ -86,26 +96,32 @@ export class ShardGroupCase extends React.Component {
           <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>;
\ No newline at end of file
+export const GroupCase = () => <div><Trap1 /></div>;