fix(focusTrap): prevent blur if trap container is not in DOM (#1258)

.changeset/tall-pianos-agree.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+prevent focusTrap from causing a `blur` if trap container is not in DOM

src/__tests__/behaviors/focusTrap.tsx

@@ -170,6 +170,35 @@ it('Should should release the trap when the signal is aborted', async () => {
   expect(document.activeElement).toEqual(durianButton)
 })
 
+it('Should should release the trap when the container is removed from the DOM', async () => {
+  const {container} = render(
+    <div>
+      <div id="trapContainer">
+        <button tabIndex={0}>Apple</button>
+      </div>
+      <button id="durian" tabIndex={0}>
+        Durian
+      </button>
+    </div>
+  )
+
+  const trapContainer = container.querySelector<HTMLElement>('#trapContainer')!
+  const durianButton = container.querySelector<HTMLElement>('#durian')!
+  const firstButton = trapContainer.querySelector('button')!
+
+  focusTrap(trapContainer)
+
+  focus(durianButton)
+  expect(document.activeElement).toEqual(firstButton)
+
+  // empty trap and remove it from the DOM
+  trapContainer.removeChild(firstButton)
+  trapContainer.parentElement?.removeChild(trapContainer)
+
+  focus(durianButton)
+  expect(document.activeElement).toEqual(durianButton)
+})
+
 it('Should handle dynamic content', async () => {
   const {container} = render(
     <div>

src/behaviors/focusTrap.ts

@@ -71,7 +71,7 @@ export function focusTrap(
   // is not found, blur the recently-focused element so that focus doesn't leave the
   // trap zone.
   function ensureTrapZoneHasFocus(focusedElement: EventTarget | null) {
-    if (focusedElement instanceof HTMLElement) {
+    if (focusedElement instanceof HTMLElement && document.contains(container)) {
       if (container.contains(focusedElement)) {
         // If a child of the trap zone was focused, remember it
         lastFocusedChild = focusedElement