Skip to content

feat(frontend): add reliable autofocus to chat message textarea and input component #2180

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ZainabTravadi wants to merge 2 commits into
base: main
Choose a base branch
from
+28 −4
Open

feat(frontend): add reliable autofocus to chat message textarea and input component #2180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab8843d
feat(frontend): auto-focus chat input and message textarea on page load
ZainabTravadi Dec 5, 2025
82133bf
Copilot suggested changes applied
ZainabTravadi Dec 5, 2025
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion frontend/src/components/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { InputProps } from './types';
import { useRef } from 'react';
import { useRef, useEffect } from 'react';

const Input = ({
id,
Expand Down Expand Up @@ -27,17 +27,26 @@ const Input = ({
jet: 'border-jet',
gray: 'border-gray-5000 dark:text-silver',
};

const borderStyles = {
thin: 'border',
thick: 'border-2',
};

const textSizeStyles = {
small: 'text-sm',
medium: 'text-base',
};

const inputRef = useRef<HTMLInputElement>(null);

// 🔥 Auto-focus logic (the real fix for the issue)
useEffect(() => {
if (isAutoFocused && inputRef.current) {
inputRef.current.focus();
}
}, [isAutoFocused]);

Comment on lines +43 to +49
Copy link

Copilot AI Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The useEffect hook for autofocus is redundant since the native autoFocus prop is already set on line 60. The native autoFocus attribute should be sufficient for most use cases. If there's a specific reason the native behavior doesn't work (e.g., React re-renders), consider removing the native prop to avoid confusion, or add a comment explaining why both are needed. The emoji in the comment is also unprofessional for production code.

Suggested change
// 🔥 Auto-focus logic (the real fix for the issue)
useEffect(() => {
if (isAutoFocused && inputRef.current) {
inputRef.current.focus();
}
}, [isAutoFocused]);
Copilot uses AI. Check for mistakes.
const hasValue = value !== undefined && value !== null && value !== '';

return (
Expand All @@ -59,11 +68,13 @@ const Input = ({
>
{children}
</input>

{leftIcon && (
<div className="absolute top-1/2 left-3 flex -translate-y-1/2 transform items-center justify-center">
{leftIcon}
</div>
)}

{placeholder && (
<label
htmlFor={id}
Expand Down
19 changes: 16 additions & 3 deletions frontend/src/components/MessageInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -512,9 +512,22 @@ export default function MessageInput({
};

useEffect(() => {
if (autoFocus) inputRef.current?.focus();
handleInput();
}, []);
if (!autoFocus) return;

const interval = setInterval(() => {
if (inputRef.current) {
inputRef.current.focus();

if (document.activeElement === inputRef.current) {
clearInterval(interval);
}
}
}, 50);

return () => clearInterval(interval);
}, [autoFocus]);



const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
setValue(e.target.value);
Expand Down