Focus diff comment popover from ref

This commit is contained in:
Neil
2026-05-31 03:37:04 -07:00
parent a040f72652
commit 2ef3f87de4
@@ -1,4 +1,4 @@
import { useEffect, useId, useRef, useState } from 'react'
import { useCallback, useEffect, useId, useRef, useState } from 'react'
import { CornerDownLeft, User } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { useMountedRef } from '@/hooks/useMountedRef'
@@ -45,7 +45,6 @@ export function DiffCommentPopover({
// reflect the in-flight status to the user.
const [submitting, setSubmitting] = useState(false)
const mountedRef = useMountedRef()
const textareaRef = useRef<HTMLTextAreaElement | null>(null)
const popoverRef = useRef<HTMLDivElement | null>(null)
// Why: stash onCancel in a ref so the document mousedown listener below can
// read the freshest callback without listing `onCancel` in its dependency
@@ -61,8 +60,10 @@ export function DiffCommentPopover({
// "Line N" label as the dialog's accessible name.
const labelId = useId()
useEffect(() => {
textareaRef.current?.focus()
const focusTextareaRef = useCallback((textarea: HTMLTextAreaElement | null): void => {
// Why: the draft field should receive focus as soon as the popover mounts;
// no external system needs a post-render Effect for this.
textarea?.focus()
}, [])
// Why: Monaco's editor area does not bubble a synthetic React click up to
@@ -129,7 +130,6 @@ export function DiffCommentPopover({
<User className="size-3" />
</span>
</div>
{/* Right Column: Content */}
<div className="orca-diff-comment-content-col" style={{ gap: '8px' }}>
<div id={labelId} className="orca-diff-comment-popover-label">
@@ -139,7 +139,7 @@ export function DiffCommentPopover({
: `Line ${lineNumber}`)}
</div>
<textarea
ref={textareaRef}
ref={focusTextareaRef}
className="orca-diff-comment-popover-textarea"
placeholder={placeholder}
value={body}