Fix bug where new captions dismiss reaction flyout (#4707)

* reaction flyout dismiss

* Change files

change-beta/@azure-communication-react-610bd9bf-e266-4b51-9f30-365e1ae2b320.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Reactions",
+  "comment": "Fixed bug where reactions is dismissed when receiving new captions",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-610bd9bf-e266-4b51-9f30-365e1ae2b320.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Reactions",
+  "comment": "Fixed bug where reactions is dismissed when receiving new captions",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -20,6 +20,7 @@ import { emojiStyles, reactionEmojiMenuStyles, reactionToolTipHostStyle } from '
 import { isDarkThemed } from '../theming/themeUtils';
 import { ReactionResources } from '..';
 import { getEmojiFrameCount } from './VideoGallery/utils/videoGalleryLayoutUtils';
+import { _preventDismissOnEvent } from '@internal/acs-ui-common';
 
 /**
  * Props for {@link ReactionButton}.
@@ -151,7 +152,8 @@ export const ReactionButton = (props: ReactionButtonProps): JSX.Element => {
       className={mergeStyles(styles, props.styles)}
       menuProps={{
         shouldFocusOnMount: true,
-        items: emojiList
+        items: emojiList,
+        calloutProps: { preventDismissOnEvent: _preventDismissOnEvent }
       }}
       onRenderIcon={props.onRenderIcon ?? onRenderIcon}
       strings={strings}