make the overlays example one that could repro the bug

tsullivan · tsullivan · commit 09ba02ba0cd7 · 2026-03-05T14:27:01.000-07:00
diff --git a/examples/flyout_system/public/components/_flyout_with_overlays.tsx b/examples/flyout_system/public/components/_flyout_with_overlays.tsx
@@ -138,7 +138,6 @@ const FlyoutContent: React.FC<FlyoutContentProps> = React.memo((props) => {
   }, [childFlyoutRefB]);
 
   const openChildFlyoutA = useCallback(() => {
-    handleCloseChildFlyoutB(); // Ensure only one child flyout is open at a time
     childFlyoutRefA.current = overlays.openSystemFlyout(
       <ChildFlyoutContent childSize={childSize} childMaxWidth={childMaxWidth} />,
       {
@@ -163,10 +162,9 @@ const FlyoutContent: React.FC<FlyoutContentProps> = React.memo((props) => {
       }
     );
     setIsChildFlyoutAOpen(true);
-  }, [childSize, childMaxWidth, overlays, title, childFlyoutRefA, handleCloseChildFlyoutB]);
+  }, [childSize, childMaxWidth, overlays, title, childFlyoutRefA]);
 
   const openChildFlyoutB = useCallback(() => {
-    handleCloseChildFlyoutA(); // Ensure only one child flyout is open at a time
     childFlyoutRefB.current = overlays.openSystemFlyout(
       <ChildFlyoutContent childSize={childSize} childMaxWidth={childMaxWidth} />,
       {
@@ -191,7 +189,7 @@ const FlyoutContent: React.FC<FlyoutContentProps> = React.memo((props) => {
       }
     );
     setIsChildFlyoutBOpen(true);
-  }, [childSize, childMaxWidth, overlays, title, childFlyoutRefB, handleCloseChildFlyoutA]);
+  }, [childSize, childMaxWidth, overlays, title, childFlyoutRefB]);
 
   return (
     <>

Original file line number	Diff line number	Diff line change
`@@ -138,7 +138,6 @@ const FlyoutContent: React.FC<FlyoutContentProps> = React.memo((props) => {`
`138`	`138`	`}, [childFlyoutRefB]);`
`139`	`139`
`140`	`140`	`const openChildFlyoutA = useCallback(() => {`
`141`		`- handleCloseChildFlyoutB(); // Ensure only one child flyout is open at a time`
`142`	`141`	`childFlyoutRefA.current = overlays.openSystemFlyout(`
`143`	`142`	`<ChildFlyoutContent childSize={childSize} childMaxWidth={childMaxWidth} />,`
`144`	`143`	`{`
`@@ -163,10 +162,9 @@ const FlyoutContent: React.FC<FlyoutContentProps> = React.memo((props) => {`
`163`	`162`	`}`
`164`	`163`	`);`
`165`	`164`	`setIsChildFlyoutAOpen(true);`
`166`		`- }, [childSize, childMaxWidth, overlays, title, childFlyoutRefA, handleCloseChildFlyoutB]);`
	`165`	`+ }, [childSize, childMaxWidth, overlays, title, childFlyoutRefA]);`
`167`	`166`
`168`	`167`	`const openChildFlyoutB = useCallback(() => {`
`169`		`- handleCloseChildFlyoutA(); // Ensure only one child flyout is open at a time`
`170`	`168`	`childFlyoutRefB.current = overlays.openSystemFlyout(`
`171`	`169`	`<ChildFlyoutContent childSize={childSize} childMaxWidth={childMaxWidth} />,`
`172`	`170`	`{`
`@@ -191,7 +189,7 @@ const FlyoutContent: React.FC<FlyoutContentProps> = React.memo((props) => {`
`191`	`189`	`}`
`192`	`190`	`);`
`193`	`191`	`setIsChildFlyoutBOpen(true);`
`194`		`- }, [childSize, childMaxWidth, overlays, title, childFlyoutRefB, handleCloseChildFlyoutA]);`
	`192`	`+ }, [childSize, childMaxWidth, overlays, title, childFlyoutRefB]);`
`195`	`193`
`196`	`194`	`return (`
`197`	`195`	`<>`