[A11y][Chat] Fix an issue where keyboard focus was lost after message is edited (#5530)

Author: vhuseinova-msft

change-beta/@azure-communication-react-57cd7723-5d5c-42b4-bbf0-c9c839448d49.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Fix an issue where keyboard focus was lost after message is edited",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-57cd7723-5d5c-42b4-bbf0-c9c839448d49.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Fix an issue where keyboard focus was lost after message is edited",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.tsx

@@ -108,13 +108,15 @@ export type ChatMyMessageComponentProps = {
   onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
   /* @conditional-compile-remove(rich-text-editor-image-upload) */
   inlineImagesWithProgress?: AttachmentMetadataInProgress[];
+  // Optional callback called when editing is complete (submitted or cancelled).
+  onEditComplete?: () => void;
 };
 
 /**
  * @private
  */
 export const ChatMyMessageComponent = (props: ChatMyMessageComponentProps): JSX.Element => {
-  const { onDeleteMessage, onSendMessage, message } = props;
+  const { onDeleteMessage, onSendMessage, message, onEditComplete, onCancelEditMessage, onUpdateMessage } = props;
   const [isEditing, setIsEditing] = useState(false);
 
   const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);
@@ -169,28 +171,34 @@ export const ChatMyMessageComponent = (props: ChatMyMessageComponentProps): JSX.
       if (`attachments` in message && attachments) {
         message.attachments = attachments;
       }
-      props.onUpdateMessage &&
-        message.messageId &&
-        (await props.onUpdateMessage(
-          message.messageId,
-          text,
-          /* @conditional-compile-remove(file-sharing-acs) */
-          { attachments: attachments }
-        ));
+      await onUpdateMessage?.(
+        message.messageId,
+        text,
+        /* @conditional-compile-remove(file-sharing-acs) */
+        { attachments: attachments }
+      );
       setIsEditing(false);
+      onEditComplete?.();
     },
-    [message, props]
+    [message, onEditComplete, onUpdateMessage]
   );
+
+  const onCancelHandler = useCallback(
+    (messageId: string) => {
+      onCancelEditMessage?.(messageId);
+      setIsEditing(false);
+      onEditComplete?.();
+    },
+    [onEditComplete, onCancelEditMessage]
+  );
+
   if (isEditing && message.messageType === 'chat') {
     return (
       <ChatMessageComponentAsEditBoxPicker
         message={message}
         strings={props.strings}
         onSubmit={onSubmitHandler}
-        onCancel={(messageId) => {
-          props.onCancelEditMessage && props.onCancelEditMessage(messageId);
-          setIsEditing(false);
-        }}
+        onCancel={onCancelHandler}
         /* @conditional-compile-remove(mention) */
         mentionLookupOptions={props.mentionOptions?.lookupOptions}
         /* @conditional-compile-remove(rich-text-editor) */

packages/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import { MessageStatus, _formatString } from '@internal/acs-ui-common';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { MessageProps, _ChatMessageProps } from '../../MessageThread';
 import { ChatMessage } from '../../../types';
 /* @conditional-compile-remove(data-loss-prevention) */
@@ -59,6 +59,11 @@ export const FluentChatMyMessageComponent = (props: FluentChatMessageComponentWr
     onInsertInlineImage
   } = props;
   const chatMessageRenderStyles = useChatMessageRenderStyles();
+  const fluentMessageBodyRef = useRef<HTMLDivElement>(null);
+
+  const onEditComplete = useCallback(() => {
+    fluentMessageBodyRef.current?.focus();
+  }, []);
 
   // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp
   // needs to be regenerated), the dependency on "new Date().toDateString()"" is added.
@@ -71,6 +76,7 @@ export const FluentChatMyMessageComponent = (props: FluentChatMessageComponentWr
         return (
           <ChatMyMessageComponent
             {...messageProps}
+            onEditComplete={onEditComplete}
             onRenderAttachmentDownloads={onRenderAttachmentDownloads}
             strings={messageProps.strings}
             message={messageProps.message}
@@ -127,7 +133,8 @@ export const FluentChatMyMessageComponent = (props: FluentChatMessageComponentWr
       /* @conditional-compile-remove(rich-text-editor-image-upload) */
       onInsertInlineImage,
       /* @conditional-compile-remove(rich-text-editor-image-upload) */
-      inlineImagesWithProgress
+      inlineImagesWithProgress,
+      onEditComplete
     ]
   );
 
@@ -190,7 +197,8 @@ export const FluentChatMyMessageComponent = (props: FluentChatMessageComponentWr
 
   const myMessageBodyProps = useMemo(() => {
     return {
-      className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage)
+      className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),
+      ref: fluentMessageBodyRef
     };
   }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage]);