When users open the chat page, the message input field does not automatically receive focus. Users currently need to manually click inside the input box before they can start typing.
Expected Behavior
The cursor should automatically appear inside the message input when the chat page loads, allowing users to immediately start typing.
Current Behavior
The input field is visible, but it is not focused automatically.
Suggested Solution
Use inputRef.current.focus() on component mount to auto-focus the message input.
Example:
const inputRef = useRef(null);
useEffect(() => {
inputRef.current?.focus();
}, []);
Impact
Improves chat UX and provides behavior similar to modern messaging apps like WhatsApp, Messenger, Discord, and Telegram.
When users open the chat page, the message input field does not automatically receive focus. Users currently need to manually click inside the input box before they can start typing.
Expected Behavior
The cursor should automatically appear inside the message input when the chat page loads, allowing users to immediately start typing.
Current Behavior
The input field is visible, but it is not focused automatically.
Suggested Solution
Use inputRef.current.focus() on component mount to auto-focus the message input.
Example:
const inputRef = useRef(null);
useEffect(() => {
inputRef.current?.focus();
}, []);
Impact
Improves chat UX and provides behavior similar to modern messaging apps like WhatsApp, Messenger, Discord, and Telegram.