Refactor blur timer handling (ellipsis feedback); improve fidelity of UT sequences

Author: diarmidmackenzie

webview-ui/src/components/chat/__tests__/ChatView.test.tsx

@@ -1236,6 +1236,10 @@ describe("ChatView - Focus Grabbing Tests", () => {
 				/>
 			</ExtensionStateContextProvider>,
 		)
+		// when chat view is hidden, this triggers a "blur" event
+		if (textAreaElement) {
+			fireEvent.blur(textAreaElement)
+		}
 
 		expect(mockFocus).toHaveBeenCalledTimes(1)
 
@@ -1256,7 +1260,7 @@ describe("ChatView - Focus Grabbing Tests", () => {
 	})
 
 	it("does not grab focus when unhidden and not previously focused", async () => {
-		const { rerender } = render(
+		const { getByTestId, rerender } = render(
 			<ExtensionStateContextProvider>
 				<ChatView
 					isHidden={false}
@@ -1267,6 +1271,7 @@ describe("ChatView - Focus Grabbing Tests", () => {
 			</ExtensionStateContextProvider>,
 		)
 
+		const textAreaElement = getByTestId("chat-textarea").querySelector("input")
 		rerender(
 			<ExtensionStateContextProvider>
 				<ChatView
@@ -1277,6 +1282,10 @@ describe("ChatView - Focus Grabbing Tests", () => {
 				/>
 			</ExtensionStateContextProvider>,
 		)
+		// when chat view is hidden, this triggers a "blur" event
+		if (textAreaElement) {
+			fireEvent.blur(textAreaElement)
+		}
 
 		rerender(
 			<ExtensionStateContextProvider>
@@ -1326,6 +1335,10 @@ describe("ChatView - Focus Grabbing Tests", () => {
 			expect(mockFocus).toHaveBeenCalledTimes(1)
 		})
 
+		// when extension becomes invisible, this will trigger a blur event before the message is sent.
+		if (textAreaElement) {
+			fireEvent.blur(textAreaElement)
+		}
 		await sendActionMessage("didBecomeInvisible")
 		expect(mockFocus).toHaveBeenCalledTimes(1)
 
@@ -1339,7 +1352,7 @@ describe("ChatView - Focus Grabbing Tests", () => {
 	})
 
 	it("does not grab focus when unhidden and not previously focused", async () => {
-		render(
+		const { findByTestId } = render(
 			<ExtensionStateContextProvider>
 				<ChatView
 					isHidden={false}
@@ -1350,6 +1363,12 @@ describe("ChatView - Focus Grabbing Tests", () => {
 			</ExtensionStateContextProvider>,
 		)
 
+		const textAreaElement = (await findByTestId("chat-textarea")).querySelector("input")
+
+		// when extension becomes invisible, this will trigger a blur event before the message is sent.
+		if (textAreaElement) {
+			fireEvent.blur(textAreaElement)
+		}
 		await sendActionMessage("didBecomeInvisible")
 		expect(mockFocus).toHaveBeenCalledTimes(0)
 
@@ -1389,9 +1408,12 @@ describe("ChatView - Focus Grabbing Tests", () => {
 		if (textAreaElement) {
 			fireEvent.blur(textAreaElement)
 		}
-
 		expect(mockFocus).toHaveBeenCalledTimes(1)
 
+		// must wait for > 500msecs after blur before making panel invisible
+		// so that the blur is interpreted as a deliberate user action.
+		await sleep(550)
+
 		await sendActionMessage("didBecomeInvisible")
 
 		expect(mockFocus).toHaveBeenCalledTimes(1)

webview-ui/src/components/chat/hooks/useFocusPreservation.tsx

@@ -18,13 +18,19 @@ import { useState, useEffect, useRef } from "react"
 export function useFocusPreservation(element: HTMLElement | null, isHidden: boolean) {
 	const [isFocused, setIsFocused] = useState(false)
 	const isHiddenRef = useRef(isHidden)
-	const isHiddenLastChangedRef = useRef(0)
+	const timerRef = useRef<NodeJS.Timeout | null>(null)
 
+	// keep isHiddenRef up-to-date
 	useEffect(() => {
 		isHiddenRef.current = isHidden
-		isHiddenLastChangedRef.current = Date.now()
+
+		if (isHidden && timerRef.current) {
+			// Now hidden, so any blur event should not be counted.
+			clearTimeout(timerRef.current)
+		}
 	}, [isHidden])
 
+	// Apply focus when required
 	useEffect(() => {
 		if (!isHidden && isFocused) {
 			element?.focus()
@@ -41,14 +47,15 @@ export function useFocusPreservation(element: HTMLElement | null, isHidden: bool
 		const onTextAreaBlur = () => {
 			// Blur event should only be interpreted as an intentional defocus
 			// if they have not occured as a result of the element being hidden.
+			// We consider a blur event to be an intentional defocus
+			// if BLUR_DELAY msecs after the blur, the element is not hidden
+			// (and has not been hidden at any point)
 			const BLUR_DELAY = 500
-			setTimeout(() => {
-				if (!isHiddenRef.current && Date.now() - isHiddenLastChangedRef.current > BLUR_DELAY) {
-					// We consider a blur event to be an intentional defocus
-					// if BLUR_DELAY msecs after the blur, the element is still hidden
-					// and the element's hidden state hasn't changed witin that time period.
+			timerRef.current = setTimeout(() => {
+				if (!isHiddenRef.current) {
 					setIsFocused(false)
 				}
+				timerRef.current = null
 			}, BLUR_DELAY)
 		}