From 73f0c4cca90ce7dcc955a511b60cfdeed75236e4 Mon Sep 17 00:00:00 2001
From: Michael Kret <88898367+michael-radency@users.noreply.github.com>
Date: Thu, 12 Dec 2024 14:49:50 +0200
Subject: [PATCH] fix(n8n Form Node): Popup does not work in some browsers
 (no-changelog) (#12176)

---
 .../src/composables/usePushConnection.ts          |  2 ++
 packages/editor-ui/src/stores/workflows.store.ts  |  4 ++--
 packages/editor-ui/src/utils/executionUtils.ts    | 15 +++++----------
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/editor-ui/src/composables/usePushConnection.ts b/packages/editor-ui/src/composables/usePushConnection.ts
index 6305ba499c..e3b976a8ac 100644
--- a/packages/editor-ui/src/composables/usePushConnection.ts
+++ b/packages/editor-ui/src/composables/usePushConnection.ts
@@ -37,6 +37,7 @@ import { useAssistantStore } from '@/stores/assistant.store';
 import NodeExecutionErrorMessage from '@/components/NodeExecutionErrorMessage.vue';
 import type { IExecutionResponse } from '@/Interface';
 import { EASY_AI_WORKFLOW_JSON } from '@/constants.workflows';
+import { clearPopupWindowState } from '../utils/executionUtils';
 
 export function usePushConnection({ router }: { router: ReturnType<typeof useRouter> }) {
 	const workflowHelpers = useWorkflowHelpers({ router });
@@ -201,6 +202,7 @@ export function usePushConnection({ router }: { router: ReturnType<typeof useRou
 			}
 
 			if (receivedData.type === 'executionFinished') {
+				clearPopupWindowState();
 				const workflow = workflowsStore.getWorkflowById(receivedData.data.workflowId);
 				if (workflow?.meta?.templateId) {
 					const isEasyAIWorkflow =
diff --git a/packages/editor-ui/src/stores/workflows.store.ts b/packages/editor-ui/src/stores/workflows.store.ts
index 2aa8cde9f9..7e4cb6d95e 100644
--- a/packages/editor-ui/src/stores/workflows.store.ts
+++ b/packages/editor-ui/src/stores/workflows.store.ts
@@ -85,7 +85,7 @@ import { TelemetryHelpers } from 'n8n-workflow';
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 import { useRouter } from 'vue-router';
 import { useSettingsStore } from './settings.store';
-import { closeFormPopupWindow, openFormPopupWindow } from '@/utils/executionUtils';
+import { clearPopupWindowState, openFormPopupWindow } from '@/utils/executionUtils';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useUsersStore } from '@/stores/users.store';
 import { updateCurrentUserSettings } from '@/api/users';
@@ -1608,7 +1608,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		uiStore.removeActiveAction('workflowRunning');
 		workflowHelpers.setDocumentTitle(workflowName.value, 'IDLE');
 
-		closeFormPopupWindow();
+		clearPopupWindowState();
 
 		const runData = workflowExecutionData.value?.data?.resultData.runData ?? {};
 		for (const nodeName in runData) {
diff --git a/packages/editor-ui/src/utils/executionUtils.ts b/packages/editor-ui/src/utils/executionUtils.ts
index d8db7b8f8e..a6fc615aed 100644
--- a/packages/editor-ui/src/utils/executionUtils.ts
+++ b/packages/editor-ui/src/utils/executionUtils.ts
@@ -82,27 +82,22 @@ export const executionFilterToQueryFilter = (
 	return queryFilter;
 };
 
-let formPopupWindow: Window | null = null;
+let formPopupWindow: boolean = false;
 
 export const openFormPopupWindow = (url: string) => {
-	if (!formPopupWindow || formPopupWindow.closed) {
+	if (!formPopupWindow) {
 		const height = 700;
 		const width = window.innerHeight - 50;
 		const left = (window.innerWidth - height) / 2;
 		const top = 50;
 		const features = `width=${height},height=${width},left=${left},top=${top},resizable=yes,scrollbars=yes`;
 		const windowName = `form-waiting-since-${Date.now()}`;
-		formPopupWindow = window.open(url, windowName, features);
-	} else {
-		formPopupWindow.location = url;
-		formPopupWindow.focus();
+		window.open(url, windowName, features);
+		formPopupWindow = true;
 	}
 };
 
-export const closeFormPopupWindow = () => {
-	formPopupWindow?.close();
-	formPopupWindow = null;
-};
+export const clearPopupWindowState = () => (formPopupWindow = false);
 
 export function displayForm({
 	nodes,