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

* Add autoFocus API to RichTextSendBox * Update api view * Change files
Azure · Apr 9, 2024 · ded48cf · ded48cf
1 parent e9f6662
commit ded48cf
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 2 deletions.
diff --git a/change/@azure-communication-react-8d09f8de-3dea-4b92-942f-308737668be5.json b/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": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/packages/communication-react/review/beta/communication-react.api.md b/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>;

diff --git a/packages/react-components/src/components/RichTextEditor/RichTextEditor.tsx b/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>

diff --git a/packages/react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx b/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>
           {

diff --git a/packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx b/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}