Prevent dismissal of ContextMenu on window resize (#1138)

Author: prprabhu-ms

change/@internal-react-components-b59150a6-2aee-43f6-9c90-fd32af27c615.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Do not dismiss ParticipantsButtton and DevicesButton Callout on resize events",
+  "packageName": "@internal/react-components",
+  "email": "82062616+prprabhu-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/DevicesButton.tsx

@@ -172,12 +172,29 @@ const generateDefaultMenuProps = (
 
   const defaultMenuProps: IContextualMenuProps = {
     items: [],
-
     styles: props.styles?.menuStyles,
-
-    // Confine the menu to the parents bounds.
-    // More info: https://github.com/microsoft/fluentui/issues/18835
-    calloutProps: { styles: { root: { maxWidth: '95%' } } }
+    calloutProps: {
+      styles: {
+        root: {
+          // Confine the menu to the parents bounds.
+          // More info: https://github.com/microsoft/fluentui/issues/18835
+          // NB: 95% to keep some space for margin, drop shadow etc around the Callout.
+          maxWidth: '95%'
+        }
+      },
+      // Disable dismiss on resize to work around a couple Fluent UI bugs
+      // - The Callout is dismissed whenever *any child of window (inclusive)* is resized. In practice, this
+      //   happens when we change the VideoGallery layout, or even when the video stream element is internally resized
+      //   by the headless SDK.
+      // - There is a `preventDismissOnEvent` prop that we could theoretically use to only dismiss when the target of
+      //   of the 'resize' event is the window itself. But experimentation shows that setting that prop doesn't
+      //   deterministically avoid dismissal.
+      //
+      // A side effect of this workaround is that the context menu stays open when window is resized, and may
+      // get detached from original target visually. That bug is preferable to the bug when this value is not set -
+      // The Callout (frequently) gets dismissed automatically.
+      preventDismissOnResize: true
+    }
   };
 
   const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuStyles?.menuItemStyles ?? {});

packages/react-components/src/components/ParticipantsButton.tsx

@@ -255,7 +255,21 @@ export const ParticipantsButton = (props: ParticipantsButtonProps): JSX.Element
     const menuProps: IContextualMenuProps = {
       title: strings.menuHeader,
       styles: merge(participantsButtonMenuPropsStyle, styles?.menuStyles),
-      items: []
+      items: [],
+      calloutProps: {
+        // Disable dismiss on resize to work around a couple Fluent UI bugs
+        // - The Callout is dismissed whenever *any child of window (inclusive)* is resized. In practice, this
+        //   happens when we change the VideoGallery layout, or even when the video stream element is internally resized
+        //   by the headless SDK.
+        // - There is a `preventDismissOnEvent` prop that we could theoretically use to only dismiss when the target of
+        //   of the 'resize' event is the window itself. But experimentation shows that setting that prop doesn't
+        //   deterministically avoid dismissal.
+        //
+        // A side effect of this workaround is that the context menu stays open when window is resized, and may
+        // get detached from original target visually. That bug is preferable to the bug when this value is not set -
+        // The Callout (frequently) gets dismissed automatically.
+        preventDismissOnResize: true
+      }
     };
 
     if (participantCount > 0) {
@@ -273,10 +287,18 @@ export const ParticipantsButton = (props: ParticipantsButtonProps): JSX.Element
         iconProps: { iconName: 'People' },
         subMenuProps: {
           items: generateDefaultParticipantsSubMenuProps(),
-
-          // Confine the menu to the parents bounds.
-          // More info: https://github.com/microsoft/fluentui/issues/18835
-          calloutProps: { styles: { root: { maxWidth: '100%' } } }
+          calloutProps: {
+            styles: {
+              root: {
+                // Confine the menu to the parents bounds.
+                // More info: https://github.com/microsoft/fluentui/issues/18835
+                maxWidth: '100%'
+              }
+            },
+            // Disable dismiss on resize to work around a couple Fluent UI bugs
+            // See reasoning in the props for the parent menu.
+            preventDismissOnResize: true
+          }
         },
         'data-ui-id': ids.participantButtonPeopleMenuItem
       });