diff --git a/packages/editor-ui/src/components/WorkflowPreview.test.ts b/packages/editor-ui/src/components/WorkflowPreview.test.ts index 5895eac2fd..f9b3e3921f 100644 --- a/packages/editor-ui/src/components/WorkflowPreview.test.ts +++ b/packages/editor-ui/src/components/WorkflowPreview.test.ts @@ -12,6 +12,7 @@ const renderComponent = createComponentRenderer(WorkflowPreview); let pinia: ReturnType; let executionsStore: ReturnType; 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(); }); }); diff --git a/packages/editor-ui/src/components/WorkflowPreview.vue b/packages/editor-ui/src/components/WorkflowPreview.vue index ff617499ff..52274cb526 100644 --- a/packages/editor-ui/src/components/WorkflowPreview.vue +++ b/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); diff --git a/packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsPreview.vue b/packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsPreview.vue index afd8f96e13..444d1dd94c 100644 --- a/packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsPreview.vue +++ b/packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsPreview.vue @@ -266,6 +266,7 @@ function onRetryButtonBlur(event: FocusEvent) {