From 83484a80de01b5f3cc08c30ad8eea7a83d96b811 Mon Sep 17 00:00:00 2001
From: dgreif <dustin.greif@gmail.com>
Date: Tue, 27 Apr 2021 18:32:43 -0700
Subject: [PATCH] fix(useFocusZone): handle add/remove nodes that have
 focusable children

---
 src/behaviors/focusZone.ts           | 6 +++---
 src/stories/useFocusZone.stories.tsx | 6 +++++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/behaviors/focusZone.ts b/src/behaviors/focusZone.ts
index 385c9bbe054..6d8ea869fd5 100644
--- a/src/behaviors/focusZone.ts
+++ b/src/behaviors/focusZone.ts
@@ -1,4 +1,4 @@
-import {isFocusable, iterateFocusableElements} from '../utils/iterateFocusableElements'
+import {iterateFocusableElements} from '../utils/iterateFocusableElements'
 import {polyfill as eventListenerSignalPolyfill} from '../polyfills/eventListenerSignal'
 import {isMacOS} from '../utils/userAgent'
 import {uniqueId} from '../utils/uniqueId'
@@ -442,12 +442,12 @@ export function focusZone(container: HTMLElement, settings?: FocusZoneSettings):
   const observer = new MutationObserver(mutations => {
     for (const mutation of mutations) {
       for (const addedNode of mutation.addedNodes) {
-        if (addedNode instanceof HTMLElement && isFocusable(addedNode)) {
+        if (addedNode instanceof HTMLElement) {
           beginFocusManagement(...iterateFocusableElements(addedNode))
         }
       }
       for (const removedNode of mutation.removedNodes) {
-        if (removedNode instanceof HTMLElement && savedTabIndex.has(removedNode)) {
+        if (removedNode instanceof HTMLElement) {
           endFocusManagement(...iterateFocusableElements(removedNode))
         }
       }
diff --git a/src/stories/useFocusZone.stories.tsx b/src/stories/useFocusZone.stories.tsx
index 8429fd752e3..bd6185c134a 100644
--- a/src/stories/useFocusZone.stories.tsx
+++ b/src/stories/useFocusZone.stories.tsx
@@ -408,7 +408,11 @@ export const ChangingSubtree = () => {
 
   const buttons: JSX.Element[] = []
   for (let i = 0; i < buttonCount; ++i) {
-    buttons.push(<MarginButton key={`button${i}`}>{i + 1}</MarginButton>)
+    buttons.push(
+      <div>
+        <MarginButton key={`button${i}`}>{i + 1}</MarginButton>
+      </div>
+    )
   }
 
   return (