fix(editor): Focus executions iframe when n8n is ready to delegate keyboard events (#12741)

packages/editor-ui/src/components/WorkflowPreview.test.ts

@@ -12,6 +12,7 @@ const renderComponent = createComponentRenderer(WorkflowPreview);
 let pinia: ReturnType<typeof createPinia>;
 let executionsStore: ReturnType<typeof useExecutionsStore>;
 let postMessageSpy: Mock;
+let focusSpy: Mock;
 let consoleErrorSpy: MockInstance;
 
 const sendPostMessageCommand = (command: string) => {
@@ -26,10 +27,12 @@ describe('WorkflowPreview', () => {
 
 		consoleErrorSpy = vi.spyOn(console, 'error');
 		postMessageSpy = vi.fn();
+		focusSpy = vi.fn();
 		Object.defineProperty(HTMLIFrameElement.prototype, 'contentWindow', {
 			writable: true,
 			value: {
 				postMessage: postMessageSpy,
+				focus: focusSpy,
 			},
 		});
 	});
@@ -105,6 +108,7 @@ describe('WorkflowPreview', () => {
 				}),
 				'*',
 			);
+			expect(focusSpy).toHaveBeenCalled();
 		});
 	});
 

packages/editor-ui/src/components/WorkflowPreview.vue

@@ -15,6 +15,7 @@ const props = withDefaults(
 		loaderType?: 'image' | 'spinner';
 		canOpenNDV?: boolean;
 		hideNodeIssues?: boolean;
+		focusOnLoad?: boolean;
 	}>(),
 	{
 		loading: false,
@@ -25,6 +26,7 @@ const props = withDefaults(
 		loaderType: 'image',
 		canOpenNDV: true,
 		hideNodeIssues: false,
+		focusOnLoad: true,
 	},
 );
 
@@ -120,6 +122,7 @@ const onMouseEnter = () => {
 	scrollX.value = window.scrollX;
 	scrollY.value = window.scrollY;
 };
+
 const onMouseLeave = () => {
 	insideIframe.value = false;
 };
@@ -131,18 +134,41 @@ const receiveMessage = ({ data }: MessageEvent) => {
 	try {
 		const json = JSON.parse(data);
 		if (json.command === 'n8nReady') {
-			ready.value = true;
+			onReady();
 		} else if (json.command === 'openNDV') {
-			nodeViewDetailsOpened.value = true;
+			onOpenNDV();
 		} else if (json.command === 'closeNDV') {
-			nodeViewDetailsOpened.value = false;
+			onCloseNDV();
 		} else if (json.command === 'error') {
-			emit('close');
+			onError();
 		}
 	} catch (e) {
 		console.error(e);
 	}
 };
+
+const onReady = () => {
+	ready.value = true;
+
+	if (props.focusOnLoad) {
+		setTimeout(() => {
+			iframeRef.value?.contentWindow?.focus();
+		});
+	}
+};
+
+const onOpenNDV = () => {
+	nodeViewDetailsOpened.value = true;
+};
+
+const onCloseNDV = () => {
+	nodeViewDetailsOpened.value = false;
+};
+
+const onError = () => {
+	emit('close');
+};
+
 const onDocumentScroll = () => {
 	if (insideIframe.value) {
 		window.scrollTo(scrollX.value, scrollY.value);

packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsPreview.vue

@@ -266,6 +266,7 @@ function onRetryButtonBlur(event: FocusEvent) {
 			</div>
 		</div>
 		<WorkflowPreview
+			:key="executionId"
 			mode="execution"
 			loader-type="spinner"
 			:execution-id="executionId"