mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
fix(editor): Focus executions iframe when n8n is ready to delegate keyboard events (#12741)
This commit is contained in:
parent
e85fe4abec
commit
d5062189db
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -266,6 +266,7 @@ function onRetryButtonBlur(event: FocusEvent) {
|
|||
</div>
|
||||
</div>
|
||||
<WorkflowPreview
|
||||
:key="executionId"
|
||||
mode="execution"
|
||||
loader-type="spinner"
|
||||
:execution-id="executionId"
|
||||
|
|
Loading…
Reference in a new issue