Restore focus to comment textarea when PR description page regains focus (#8226)

* Initial plan

* Initial plan for restoring focus to comment textarea

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

* Restore focus to comment textarea when description page regains focus

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

* Address code review feedback - add constant for sessionStorage key and improve comments

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

* Move constant to shared constants file to avoid duplication

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

* Simplify focus restoration - use window focus event instead of view state

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

* Extract magic number to named constant

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

* Extract 'comment-textarea' string literal to a constant

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

Author: Copilot

webviews/common/constants.ts

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/**
+ * ID for the main comment textarea element in the PR description page.
+ */
+export const COMMENT_TEXTAREA_ID = 'comment-textarea';

webviews/common/context.tsx

@@ -5,6 +5,7 @@
 
 import { createContext } from 'react';
 import { getState, setState, updateState } from './cache';
+import { COMMENT_TEXTAREA_ID } from './constants';
 import { getMessageHandler, MessageHandler } from './message';
 import { CloseResult, OpenCommitChangesArgs } from '../../common/views';
 import { IComment } from '../../src/common/comment';
@@ -404,7 +405,7 @@ export class PRContext {
 				window.scrollTo(message.scrollPosition.x, message.scrollPosition.y);
 				return;
 			case 'pr.scrollToPendingReview':
-				const pendingReview = document.getElementById('pending-review') ?? document.getElementById('comment-textarea');
+				const pendingReview = document.getElementById('pending-review') ?? document.getElementById(COMMENT_TEXTAREA_ID);
 				if (pendingReview) {
 					pendingReview.scrollIntoView();
 					pendingReview.focus();

webviews/components/comment.tsx

@@ -14,6 +14,7 @@ import { CommentEvent, EventType, ReviewEvent } from '../../src/common/timelineE
 import { GithubItemStateEnum } from '../../src/github/interface';
 import { PullRequest, ReviewType } from '../../src/github/views';
 import { ariaAnnouncementForReview } from '../common/aria';
+import { COMMENT_TEXTAREA_ID } from '../common/constants';
 import PullRequestContext from '../common/context';
 import emitter from '../common/events';
 import { useStateProp } from '../common/hooks';
@@ -435,7 +436,7 @@ export function AddComment({
 	return (
 		<form id="comment-form" ref={form as React.MutableRefObject<HTMLFormElement>} className="comment-form main-comment-form" >
 			<textarea
-				id="comment-textarea"
+				id={COMMENT_TEXTAREA_ID}
 				name="body"
 				ref={textareaRef as React.MutableRefObject<HTMLTextAreaElement>}
 				onInput={({ target }) => updatePR({ pendingCommentText: (target as HTMLTextAreaElement).value })}
@@ -602,7 +603,7 @@ export const AddCommentSimple = (pr: PullRequest) => {
 	return (
 		<span className="comment-form">
 			<textarea
-				id="comment-textarea"
+				id={COMMENT_TEXTAREA_ID}
 				name="body"
 				placeholder="Leave a comment"
 				ref={textareaRef as React.MutableRefObject<HTMLTextAreaElement>}

webviews/editorWebview/app.tsx

@@ -8,6 +8,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import { render } from 'react-dom';
 import { Overview } from './overview';
 import { PullRequest } from '../../src/github/views';
+import { COMMENT_TEXTAREA_ID } from '../common/constants';
 import PullRequestContext from '../common/context';
 
 export function main() {
@@ -21,6 +22,25 @@ export function Root({ children }) {
 		ctx.onchange = setPR;
 		setPR(ctx.pr);
 	}, []);
+
+	// Restore focus to comment textarea when window regains focus if user was typing
+	useEffect(() => {
+		const handleWindowFocus = () => {
+			// Delay to let the focus event settle before checking focus state
+			const FOCUS_SETTLE_DELAY_MS = 100;
+			setTimeout(() => {
+				const commentTextarea = document.getElementById(COMMENT_TEXTAREA_ID) as HTMLTextAreaElement;
+				// Only restore focus if there's content and nothing else has focus
+				if (commentTextarea && commentTextarea.value && document.activeElement === document.body) {
+					commentTextarea.focus();
+				}
+			}, FOCUS_SETTLE_DELAY_MS);
+		};
+
+		window.addEventListener('focus', handleWindowFocus);
+		return () => window.removeEventListener('focus', handleWindowFocus);
+	}, []);
+
 	window.onscroll = debounce(() => {
 		ctx.postMessage({
 			command: 'scroll',