From 5a861739c082cd20c3bcaa7900237866a6688e1a Mon Sep 17 00:00:00 2001
From: carocao-msft <96077406+carocao-msft@users.noreply.github.com>
Date: Fri, 7 Jun 2024 11:39:29 -0700
Subject: [PATCH] Fix bug where new captions dismiss reaction flyout  (#4707)

* reaction flyout dismiss

* Change files
---
 ...ation-react-610bd9bf-e266-4b51-9f30-365e1ae2b320.json | 9 +++++++++
 ...ation-react-610bd9bf-e266-4b51-9f30-365e1ae2b320.json | 9 +++++++++
 .../react-components/src/components/ReactionButton.tsx   | 4 +++-
 3 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 change-beta/@azure-communication-react-610bd9bf-e266-4b51-9f30-365e1ae2b320.json
 create mode 100644 change/@azure-communication-react-610bd9bf-e266-4b51-9f30-365e1ae2b320.json

diff --git a/change-beta/@azure-communication-react-610bd9bf-e266-4b51-9f30-365e1ae2b320.json b/change-beta/@azure-communication-react-610bd9bf-e266-4b51-9f30-365e1ae2b320.json
new file mode 100644
index 00000000000..5d6fc5386ae
--- /dev/null
+++ b/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": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-610bd9bf-e266-4b51-9f30-365e1ae2b320.json b/change/@azure-communication-react-610bd9bf-e266-4b51-9f30-365e1ae2b320.json
new file mode 100644
index 00000000000..5d6fc5386ae
--- /dev/null
+++ b/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": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/src/components/ReactionButton.tsx b/packages/react-components/src/components/ReactionButton.tsx
index 48a306ba450..0bd2fe4677b 100644
--- a/packages/react-components/src/components/ReactionButton.tsx
+++ b/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}