[Chat] Add autoFocus API to RichTextSendBox (#4435)

* Add autoFocus API to RichTextSendBox

* Update api view

* Change files

Author: Leah-Xia-Microsoft

change/@azure-communication-react-8d09f8de-3dea-4b92-942f-308737668be5.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "improvement",
+  "workstream": "RTE",
+  "comment": "Add autoFocus API to RichTextSendBox",
+  "packageName": "@azure/communication-react",
+  "email": "107075081+Leah-Xia-Microsoft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -3883,6 +3883,7 @@ export const RichTextSendBox: (props: RichTextSendBoxProps) => JSX.Element;
 // @beta
 export interface RichTextSendBoxProps {
     activeAttachmentUploads?: AttachmentMetadata[];
+    autoFocus?: 'sendBoxTextField';
     disabled?: boolean;
     onCancelAttachmentUpload?: (attachmentId: string) => void;
     onSendMessage: (content: string) => Promise<void>;

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

@@ -53,6 +53,7 @@ export interface RichTextEditorProps {
   strings: Partial<RichTextSendBoxStrings>;
   showRichTextEditorFormatting: boolean;
   styles: RichTextEditorStyleProps;
+  autoFocus?: 'sendBoxTextField';
 }
 
 /**
@@ -71,7 +72,8 @@ export interface RichTextEditorComponentRef {
  * @beta
  */
 export const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {
-  const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting, content } = props;
+  const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting, content, autoFocus } =
+    props;
   const editor = useRef<IEditor | null>(null);
   const contentValue = useRef<string | undefined>(content);
   const theme = useTheme();
@@ -202,6 +204,7 @@ export const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichT
           data-testid={'rooster-rich-text-editor'}
           // if we don't use 'allowKeyboardEventPropagation' only the enter key is caught
           onKeyDown={props.onKeyDown}
+          focusOnInit={autoFocus === 'sendBoxTextField'}
         />
       </div>
     </div>

packages/react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx

@@ -50,6 +50,7 @@ export interface RichTextInputBoxComponentProps {
   // otherwise the editor will grow to fit the content
   richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;
   isHorizontalLayoutDisabled?: boolean;
+  autoFocus?: 'sendBoxTextField';
 }
 
 /**
@@ -71,7 +72,8 @@ export const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps)
     hasAttachments,
     richTextEditorStyleProps,
     isHorizontalLayoutDisabled = false,
-    content
+    content,
+    autoFocus
   } = props;
   const theme = useTheme();
   const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(false);
@@ -175,6 +177,7 @@ export const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps)
               strings={strings}
               showRichTextEditorFormatting={showRichTextEditorFormatting}
               styles={richTextEditorStyle}
+              autoFocus={autoFocus}
             />
           </Stack.Item>
           {

packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx

@@ -136,6 +136,11 @@ export interface RichTextSendBoxProps {
    * @beta
    */
   activeAttachmentUploads?: AttachmentMetadata[];
+  /**
+   * enumerable to determine if the input box has focus on render or not.
+   * When undefined nothing has focus on render
+   */
+  autoFocus?: 'sendBoxTextField';
   /* @conditional-compile-remove(attachment-upload) */
   /**
    * Optional callback to remove the attachment upload before sending by clicking on
@@ -158,6 +163,7 @@ export const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {
   const {
     disabled = false,
     systemMessage,
+    autoFocus,
     onSendMessage,
     /* @conditional-compile-remove(attachment-upload) */
     activeAttachmentUploads,
@@ -348,6 +354,7 @@ export const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {
         // setting the content will ensure that the latest content is used when editor is re-rendered
         content={contentValue}
         placeholderText={strings.placeholderText}
+        autoFocus={autoFocus}
         onChange={setContent}
         onEnterKeyDown={sendMessageOnClick}
         editorComponentRef={editorComponentRef}