use focusin event

Author: amunger

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

@@ -5,7 +5,7 @@
 
 import type { Event } from 'vs/base/common/event';
 import type { IDisposable } from 'vs/base/common/lifecycle';
-import * as webviewMessages from 'vs/workbench/contrib/notebook/browser/view/renderers/webviewMessages';
+import type * as webviewMessages from 'vs/workbench/contrib/notebook/browser/view/renderers/webviewMessages';
 import type { NotebookCellMetadata } from 'vs/workbench/contrib/notebook/common/notebookCommon';
 import type * as rendererApi from 'vscode-notebook-renderer';
 
@@ -94,6 +94,8 @@ async function webviewPreloads(ctx: PreloadContext) {
 	let currentRenderOptions = ctx.renderOptions;
 	const settingChange: EmitterLike<RenderOptions> = createEmitter<RenderOptions>();
 
+	let isInputElementFocused: boolean | undefined = undefined;
+
 	const acquireVsCodeApi = globalThis.acquireVsCodeApi;
 	const vscode = acquireVsCodeApi();
 	delete (globalThis as any).acquireVsCodeApi;
@@ -138,16 +140,19 @@ async function webviewPreloads(ctx: PreloadContext) {
 		};
 
 	// check if an input element is focused within the output element
-	const handleOutputFocus = () => {
+	const checkOutputInputFocus = () => {
+
 		const activeElement = document.activeElement;
 		if (!activeElement) {
 			return;
 		}
 
-		if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
+		isInputElementFocused = !!activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA');
+
+		if (isInputElementFocused) {
 			postNotebookMessage<webviewMessages.IOutputInputFocusMessage>('outputInputFocus', { hasFocus: true });
 
-			activeElement.addEventListener('blur', () => {
+			activeElement.addEventListener('onblur', () => {
 				postNotebookMessage<webviewMessages.IOutputInputFocusMessage>('outputInputFocus', { hasFocus: false });
 			}, { once: true });
 		}
@@ -158,7 +163,7 @@ async function webviewPreloads(ctx: PreloadContext) {
 			return;
 		}
 
-		handleOutputFocus();
+		checkOutputInputFocus();
 
 		for (const node of event.composedPath()) {
 			if (node instanceof HTMLElement && node.classList.contains('output')) {
@@ -240,7 +245,6 @@ async function webviewPreloads(ctx: PreloadContext) {
 	};
 
 	document.body.addEventListener('click', handleInnerClick);
-	document.body.addEventListener('focusin', handleOutputFocus);
 
 	interface RendererContext extends rendererApi.RendererContext<unknown> {
 		readonly onDidChangeSettings: Event<RenderOptions>;