Fix SendBox initialization that caused MaxListenersExceededWarning logs in the Console tool for ChatComposite with rich text editor enabled. (#5537)

Author: vhuseinova-msft

change-beta/@azure-communication-react-0ada3974-ba3c-4edd-921a-621f11616e23.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Chat",
+  "comment": "Fix SendBox initialization that caused MaxListenersExceededWarning logs in the Console tool for ChatComposite with rich text editor enabled.",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-0ada3974-ba3c-4edd-921a-621f11616e23.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Chat",
+  "comment": "Fix SendBox initialization that caused MaxListenersExceededWarning logs in the Console tool for ChatComposite with rich text editor enabled.",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/common/SendBoxPicker.tsx

@@ -92,14 +92,12 @@ export const SendBoxPicker = (props: SendBoxPickerProps): JSX.Element => {
   /* @conditional-compile-remove(rich-text-editor-image-upload) */
   const { onPaste, onInsertInlineImage, inlineImagesWithProgress, onRemoveInlineImage } = richTextEditorOptions || {};
 
-  const sendBoxProps = usePropsFor(SendBox);
-
   /* @conditional-compile-remove(rich-text-editor-composite-support) */
   const isRichTextEditorEnabled = useMemo(() => {
     return richTextEditorOptions !== undefined;
   }, [richTextEditorOptions]);
 
-  const sendBox = useMemo(() => <SendBox {...sendBoxProps} {...props} />, [props, sendBoxProps]);
+  const sendBox = useMemo(() => <SendBoxWrapper {...props} />, [props]);
 
   /* @conditional-compile-remove(rich-text-editor-composite-support) */
   if (isRichTextEditorEnabled) {
@@ -123,3 +121,10 @@ export const SendBoxPicker = (props: SendBoxPickerProps): JSX.Element => {
   }
   return sendBox;
 };
+
+// Move SendBox initialization to a separate component as otherwise it will cause re-render for Suspense and _ErrorBoundary when props and sendBoxProps are updated
+const SendBoxWrapper = (props: SendBoxPickerProps): JSX.Element => {
+  const sendBoxProps = usePropsFor(SendBox);
+
+  return <SendBox {...sendBoxProps} {...props} />;
+};