Focus on text input field

Author: Kateryna Kodonenko

packages/help-center/src/components/help-center-container.tsx

@@ -63,37 +63,6 @@ const HelpCenterContainer: React.FC< Container > = ( {
 
 	const cardMergeRefs = useMergeRefs( [ nodeRef, focusReturnRef ] );
 
-	// Keep focus within the help center when entering `Zendesk messaging`
-	useEffect( () => {
-		const helpCenter = nodeRef.current;
-		if ( ! helpCenter ) {
-			return;
-		}
-
-		helpCenter.setAttribute( 'tabindex', '-1' );
-
-		// Focus the chat container when it appears
-		const observer = new MutationObserver( ( mutations ) => {
-			for ( const mutation of mutations ) {
-				if ( mutation.type === 'childList' ) {
-					const chatContainer = document.querySelector( '.chatbox' ) as HTMLElement;
-					if ( chatContainer ) {
-						chatContainer.setAttribute( 'tabindex', '-1' );
-						chatContainer.focus();
-						observer.disconnect();
-						break;
-					}
-				}
-			}
-		} );
-
-		observer.observe( helpCenter, { childList: true, subtree: true } );
-
-		return () => {
-			observer.disconnect();
-		};
-	}, [ show, isMinimized ] );
-
 	const shouldCloseOnEscapeRef = useRef( false );
 
 	shouldCloseOnEscapeRef.current = !! show && ! hidden && ! isMinimized;

packages/odie-client/src/components/send-message-input/index.tsx

@@ -6,7 +6,7 @@ import {
 } from '@automattic/zendesk-client';
 import { DropZone, Spinner } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { useCallback, useRef, useState } from '@wordpress/element';
+import { useCallback, useRef, useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { SendMessageIcon } from '../../assets/send-message-icon';
@@ -65,9 +65,17 @@ export const OdieSendMessageButton = () => {
 		false;
 	const sendMessage = useSendChatMessage();
 	const isChatBusy = chat.status === 'loading' || chat.status === 'sending';
+	const isInitialLoading = chat.status === 'loading';
 	const [ isMessageSizeValid, setIsMessageSizeValid ] = useState( true );
 	const [ submitDisabled, setSubmitDisabled ] = useState( true );
 
+	// Focus input when chat is ready
+	useEffect( () => {
+		if ( ! isInitialLoading ) {
+			inputRef.current?.focus();
+		}
+	}, [ isInitialLoading ] );
+
 	const { data: authData } = useAuthenticateZendeskMessaging(
 		isUserEligibleForPaidSupport,
 		'messenger'