Fix checkOutputInputFocus to detect editable elements in shadow DOM and handle tabbing

src/vs/workbench/contrib/notebook/browser/view/renderers/webviewPreloads.ts

@@ -172,19 +172,27 @@ async function webviewPreloads(ctx: PreloadContext) {
 		return;
 	}
 	let lastFocusedOutput: { id: string } | undefined = undefined;
+	let lastInputFocusedOutput: { id: string } | undefined = undefined;
 	const handleOutputFocusOut = (event: FocusEvent) => {
 		const outputFocus = event && getOutputContainer(event);
 		if (!outputFocus) {
 			return;
 		}
 		// Possible we're tabbing through the elements of the same output.
 		// Lets see if focus is set back to the same output.
+		const wasInputFocused = lastInputFocusedOutput?.id === outputFocus.id;
 		lastFocusedOutput = undefined;
+		lastInputFocusedOutput = undefined;
 		setTimeout(() => {
 			if (lastFocusedOutput?.id === outputFocus.id) {
 				return;
 			}
 			postNotebookMessage<webviewMessages.IOutputBlurMessage>('outputBlur', outputFocus);
+
+			// If input was focused and we're leaving the output, send input unfocus message
+			if (wasInputFocused && lastInputFocusedOutput?.id !== outputFocus.id) {
+				postNotebookMessage<webviewMessages.IOutputInputFocusMessage>('outputInputFocus', { inputFocused: false, id: outputFocus.id });
+			}
 		}, 0);
 	};
 
@@ -196,18 +204,25 @@ async function webviewPreloads(ctx: PreloadContext) {
 	// check if an input element is focused within the output element
 	const checkOutputInputFocus = (e: FocusEvent) => {
 		lastFocusedOutput = getOutputContainer(e);
-		const activeElement = window.document.activeElement;
-		if (!activeElement) {
-			return;
-		}
+		let activeElement = window.document.activeElement;
 
-		const id = lastFocusedOutput?.id;
-		if (id && (isEditableElement(activeElement) || activeElement.tagName === 'SELECT')) {
-			postNotebookMessage<webviewMessages.IOutputInputFocusMessage>('outputInputFocus', { inputFocused: true, id });
+		// Recursively check for editable elements in shadow DOM
+		while (activeElement) {
+			if (isEditableElement(activeElement) || activeElement.tagName === 'SELECT') {
+				const id = lastFocusedOutput?.id;
+				if (id) {
+					lastInputFocusedOutput = lastFocusedOutput;
+					postNotebookMessage<webviewMessages.IOutputInputFocusMessage>('outputInputFocus', { inputFocused: true, id });
+				}
+				return;
+			}
 
-			activeElement.addEventListener('blur', () => {
-				postNotebookMessage<webviewMessages.IOutputInputFocusMessage>('outputInputFocus', { inputFocused: false, id });
-			}, { once: true });
+			// If not editable, check shadow root descendants
+			if (activeElement.shadowRoot) {
+				activeElement = activeElement.shadowRoot.activeElement;
+			} else {
+				break;
+			}
 		}
 	};