fix: allow returnFocus to be garbage collected, fixes #173

theKashey · Nov 7, 2021 · ad3a4a1 · ad3a4a1
1 parent d5ec48b
commit ad3a4a1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/_tests/FocusLock.spec.js b/_tests/FocusLock.spec.js
@@ -216,34 +216,28 @@ d-action
 
       expect(document.activeElement.innerHTML).to.be.equal('d-action0');
       wrapper.find('.clickTarget0').simulate('click');
-
       await tick();
-
       expect(document.activeElement.innerHTML).to.be.equal('d-action1');
-      wrapper.find('.clickTarget1').simulate('click');
 
+      wrapper.find('.clickTarget1').simulate('click');
       await tick();
-
       expect(document.activeElement.innerHTML).to.be.equal('d-action2');
-      wrapper.find('.clickTarget2').simulate('click');
 
+      wrapper.find('.clickTarget2').simulate('click');
       await tick();
-
       expect(document.activeElement.innerHTML).to.be.equal('d-action3');
-      wrapper.find('.clickTarget2').simulate('click');
 
+      // unlock
+      wrapper.find('.clickTarget2').simulate('click');
       await tick();
-
       expect(document.activeElement.innerHTML).to.be.equal('d-action2');
-      wrapper.find('.clickTarget1').simulate('click');
 
+      wrapper.find('.clickTarget1').simulate('click');
       await tick();
-
       expect(document.activeElement.innerHTML).to.be.equal('d-action1');
-      wrapper.find('.clickTarget0').simulate('click');
 
+      wrapper.find('.clickTarget0').simulate('click');
       await tick();
-
       expect(document.activeElement.innerHTML).to.be.equal('d-action0');
     });
 

diff --git a/src/Lock.js b/src/Lock.js
@@ -7,6 +7,7 @@ import {useMergeRefs} from 'use-callback-ref';
 
 import {hiddenGuard} from './FocusGuard';
 import {mediumFocus, mediumBlur, mediumSidecar} from './medium';
+import {useEffect} from "react";
 
 const emptyArray = [];
 
@@ -59,6 +60,14 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
     }
   }, [onDeactivationCallback]);
 
+  useEffect(() => {
+    if(!disabled) {
+      // cleanup return focus on trap deactivation
+      // sideEffect/returnFocus should happen by this time
+      originalFocusedElement.current = null;
+    }
+  }, []);
+
   const returnFocus = React.useCallback((allowDefer) => {
     const {current: returnFocusTo} = originalFocusedElement;
     if (returnFocusTo && returnFocusTo.focus) {