diff --git a/change/@internal-react-components-b59150a6-2aee-43f6-9c90-fd32af27c615.json b/change/@internal-react-components-b59150a6-2aee-43f6-9c90-fd32af27c615.json new file mode 100644 index 00000000000..071699cf683 --- /dev/null +++ b/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" +} diff --git a/packages/react-components/src/components/DevicesButton.tsx b/packages/react-components/src/components/DevicesButton.tsx index 67210c8ba78..0c1bb7be745 100644 --- a/packages/react-components/src/components/DevicesButton.tsx +++ b/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 ?? {}); diff --git a/packages/react-components/src/components/ParticipantsButton.tsx b/packages/react-components/src/components/ParticipantsButton.tsx index fc137d3dd88..bc7b106131d 100644 --- a/packages/react-components/src/components/ParticipantsButton.tsx +++ b/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 });