fix(useFocusZone): handle add/remove nodes that have focusable children (#1185)

Author: dgreif

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))
         }
       }

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 (