From 003acf38c6de9500f7588311ccdfe9f5105b21c0 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:18:22 +0200
Subject: [PATCH 01/11] fix: show the end screen in the preview while its block
 is open

The preview went only to questions. Now the open end block sends the
preview to the end screen (nothing is sent), a save shows the new text,
and a form that sends people to a link gets a short note instead.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/EndScreenBlock.test.ts   | 12 +++++
 .../Factory/Document/EndScreenBlock.vue       |  7 ++-
 .../components/Factory/Document/blockFocus.ts |  3 ++
 .../Factory/Preview/FormPreview.test.ts       | 36 +++++++++++++++
 .../Factory/Preview/FormPreview.vue           | 34 +++++++++++++-
 .../Factory/Preview/PreviewFrame.test.ts      | 46 +++++++++++++++++++
 .../Factory/Preview/PreviewFrame.vue          | 43 ++++++++---------
 resources/js/forms/classic/previewTarget.ts   |  2 +
 .../forms/classic/usePreviewMessages.test.ts  | 19 ++++++++
 .../js/forms/classic/usePreviewMessages.ts    |  6 ++-
 resources/js/stores/conversation.ts           |  9 +++-
 11 files changed, 189 insertions(+), 28 deletions(-)
 create mode 100644 resources/js/forms/classic/previewTarget.ts

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 1025d4b5..53bf9330 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -8,6 +8,7 @@ import { useNotice } from "@/stores/notice";
 import { useFreshForm } from "@/utils/useFreshForm";
 import CompletionPage from "@/components/Factory/Settings/CompletionPage.vue";
 import EndScreenBlock from "./EndScreenBlock.vue";
+import { endScreenOpen } from "./blockFocus";
 
 vi.mock("@/api/forms", async (importOriginal) => ({
     ...(await importOriginal()),
@@ -30,6 +31,8 @@ let wrapper: VueWrapper | undefined;
 
 // real actions, not the stubs of the global testing pinia
 const mountBlock = () => {
+    // one at a time, as in the document: they share the open state
+    wrapper?.unmount();
     wrapper = mount(EndScreenBlock, {
         attachTo: document.body,
         global: { plugins: [pinia], directives: { tooltip: {} } },
@@ -119,6 +122,15 @@ describe("the end screen in the document", () => {
         expect(block.find("#end-screen-headline").exists()).toBe(false);
     });
 
+    it("tells the preview while it's open, and starts closed on the next page", async () => {
+        const block = await open();
+        expect(endScreenOpen.value).toBe(true);
+
+        block.unmount();
+        wrapper = undefined;
+        expect(endScreenOpen.value).toBe(false);
+    });
+
     it("has the question card's phone sizes, number column and focus bar", async () => {
         const block = await open();
         const [number, card] = block.findAll("#row-end-screen > div");
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index 70eac0d6..f56e3cc9 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -127,7 +127,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, reactive, watch } from "vue";
 import { Link } from "@inertiajs/vue3";
 import { D9Icon, D9Input, D9Label, D9Switch } from "@deck9/ui";
 import { useEventListener } from "@vueuse/core";
@@ -138,12 +138,14 @@ import { keepAlive } from "@/api/handler";
 import Editor from "@/components/Factory/Shared/Editor.vue";
 import { freshFormLoaded, trackFormSave } from "@/utils/useFreshForm";
 import { plainText } from "./questionSummary";
+import { endScreenOpen } from "./blockFocus";
 
 const store = useForm();
 const workbench = useWorkbench();
 const notice = useNotice();
 
-const isOpen = ref(false);
+// shared, so the preview shows the end screen while it's open
+const isOpen = endScreenOpen;
 
 const settingsLink = computed(
   () =>
@@ -263,5 +265,6 @@ watch(
 onBeforeUnmount(() => {
   save.cancel();
   delete notice.waitingSaves[SAVE];
+  isOpen.value = false;
 });
 </script>
diff --git a/resources/js/components/Factory/Document/blockFocus.ts b/resources/js/components/Factory/Document/blockFocus.ts
index c1be464c..24e3458e 100644
--- a/resources/js/components/Factory/Document/blockFocus.ts
+++ b/resources/js/components/Factory/Document/blockFocus.ts
@@ -4,6 +4,9 @@ import { useForm, useWorkbench } from "@/stores";
 // the question whose card takes the cursor once it shows: its text editor isn't there at once
 export const cursorFor = ref<string | null>(null);
 
+// the end screen's card is open: it's no block, so the workbench doesn't hold it
+export const endScreenOpen = ref(false);
+
 // puts the cursor in a question's text, or in a group's name
 export async function focusBlock(block: FormBlockModel | null): Promise<boolean> {
     if (!block) {
diff --git a/resources/js/components/Factory/Preview/FormPreview.test.ts b/resources/js/components/Factory/Preview/FormPreview.test.ts
index 6f3a8dea..e1449a9d 100644
--- a/resources/js/components/Factory/Preview/FormPreview.test.ts
+++ b/resources/js/components/Factory/Preview/FormPreview.test.ts
@@ -1,6 +1,7 @@
 import { enableAutoUnmount, flushPromises, mount } from "@vue/test-utils";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { useForm, useWorkbench } from "@/stores";
+import { END_SCREEN } from "@/forms/classic/previewTarget";
 import FormPreview from "./FormPreview.vue";
 import PreviewToggle from "./PreviewToggle.vue";
 
@@ -149,6 +150,41 @@ describe("the preview panel", () => {
         );
     });
 
+    it("says when it shows the end screen", async () => {
+        screen(true);
+        useForm().form = { use_cta_redirect: false } as FormModel;
+        const wrapper = mountPreview();
+
+        wrapper.findComponent(PreviewFrame).vm.$emit("update:shown", END_SCREEN);
+        await flushPromises();
+
+        expect(wrapper.get("#preview-heading").text()).toBe("Preview · end screen");
+        expect(wrapper.find("iframe").isVisible()).toBe(true);
+    });
+
+    // the preview doesn't follow the link, so its end screen is one nobody sees
+    it.each([true, false])("says where people go instead of the end screen when the form sends them to a link (desktop: %s)", async (wide) => {
+        screen(wide);
+        useForm().blocks = [{ uuid: "q1", type: "input-short" }] as FormBlockModel[];
+        useForm().form = { use_cta_redirect: true, cta_link: "https://example.com/thanks" } as FormModel;
+        const wrapper = mountPreview();
+        await flushPromises();
+
+        const frame = wrapper.findComponent(PreviewFrame);
+        frame.vm.$emit("update:shown", END_SCREEN);
+        await flushPromises();
+
+        const panel = document.querySelector(wide ? "aside" : "[role=dialog]");
+        expect(panel?.textContent).toContain("No end screen: people go to https://example.com/thanks.");
+        expect(frame.isVisible()).toBe(false);
+
+        // back at a question, the frame shows again
+        frame.vm.$emit("update:shown", "q1");
+        await flushPromises();
+        expect(document.body.textContent).not.toContain("No end screen");
+        expect(frame.isVisible()).toBe(true);
+    });
+
     it.each([true, false])("shows nothing when closed (desktop: %s)", (wide) => {
         screen(wide);
         const wrapper = mountPreview(false);
diff --git a/resources/js/components/Factory/Preview/FormPreview.vue b/resources/js/components/Factory/Preview/FormPreview.vue
index 1606636e..4b3dfa41 100644
--- a/resources/js/components/Factory/Preview/FormPreview.vue
+++ b/resources/js/components/Factory/Preview/FormPreview.vue
@@ -11,10 +11,18 @@
     <p v-if="hidden" class="w-80 max-w-full text-xs text-grey-600">
       {{ hidden }}, so the preview can't jump to it.
     </p>
+    <p v-if="redirect" class="w-80 max-w-full break-words text-sm text-grey-600">
+      No end screen: people go to {{ redirect }}.
+    </p>
     <p v-if="isEmpty" class="w-80 max-w-full text-sm text-grey-600">
       Add a question to see it here.
     </p>
-    <PreviewFrame v-else v-model:shown="shown" v-model:missed="missed" />
+    <PreviewFrame
+      v-else
+      v-show="!redirect"
+      v-model:shown="shown"
+      v-model:missed="missed"
+    />
   </aside>
 
   <!-- tablet and phone: over the document; closing it keeps it mounted, so focus goes back to Preview -->
@@ -39,10 +47,21 @@
       <p v-if="hidden" class="w-80 max-w-full text-xs text-grey-600">
         {{ hidden }}, so the preview can't jump to it.
       </p>
+      <p
+        v-if="redirect"
+        class="w-80 max-w-full break-words text-sm text-grey-600"
+      >
+        No end screen: people go to {{ redirect }}.
+      </p>
       <p v-if="isEmpty" class="w-80 max-w-full text-sm text-grey-600">
         Add a question to see it here.
       </p>
-      <PreviewFrame v-else v-model:shown="shown" v-model:missed="missed" />
+      <PreviewFrame
+        v-else
+        v-show="!redirect"
+        v-model:shown="shown"
+        v-model:missed="missed"
+      />
     </DialogPanel>
   </Dialog>
 </template>
@@ -54,6 +73,7 @@ import { useMediaQuery } from "@vueuse/core";
 import { computed, ref, watch } from "vue";
 import { useForm, useWorkbench } from "@/stores";
 import { questionNumbers } from "@/components/Factory/Document/questionSummary";
+import { END_SCREEN } from "@/forms/classic/previewTarget";
 import PreviewFrame from "./PreviewFrame.vue";
 
 const open = defineModel<boolean>({ required: true });
@@ -68,9 +88,19 @@ const numbers = computed(() => questionNumbers(store.blocks ?? []));
 const shown = ref<string | null>(null);
 const missed = ref<string | null>(null);
 const heading = computed(() => {
+  if (shown.value === END_SCREEN) {
+    return "Preview · end screen";
+  }
+
   const number = shown.value && numbers.value[shown.value];
   return number ? `Preview · question ${number}` : "Preview";
 });
+// the preview doesn't follow the link, so its end screen is one nobody sees
+const redirect = computed(() =>
+  shown.value === END_SCREEN && store.form?.use_cta_redirect
+    ? store.form.cta_link
+    : undefined,
+);
 // the open question, when the preview couldn't go to it (a group has no number);
 // the public form leaves out a hidden question and each one in a hidden group
 const hidden = computed(() => {
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.test.ts b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
index dc9818d1..93319a0a 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.test.ts
+++ b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
@@ -14,6 +14,8 @@ import { useForm, useLogic, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
 import { callUpdateFormBlock } from "@/api/blocks";
 import { callUpdateFormBlockInteraction } from "@/api/interactions";
+import { endScreenOpen } from "@/components/Factory/Document/blockFocus";
+import { END_SCREEN } from "@/forms/classic/previewTarget";
 import PreviewFrame from "./PreviewFrame.vue";
 
 vi.mock("@/api/blocks", () => ({ callUpdateFormBlock: vi.fn() }));
@@ -97,6 +99,7 @@ describe("the preview frame", () => {
         setActivePinia(testing);
         vi.clearAllMocks();
         answers.length = 0;
+        endScreenOpen.value = false;
     });
 
     it("runs the public form in preview mode at the open question", () => {
@@ -142,6 +145,49 @@ describe("the preview frame", () => {
         );
     });
 
+    it("starts at the end screen while its card is open", () => {
+        endScreenOpen.value = true;
+        const iframe = mountFrame(null).get("iframe");
+
+        expect(iframe.attributes("src")).toBe(`/form1?preview=1&block=${END_SCREEN}`);
+    });
+
+    it("goes to the end screen when its card opens, and back to a question opened after", async () => {
+        const wrapper = mountFrame();
+        const post = vi.spyOn(frameWindow(wrapper), "postMessage");
+
+        // opening the card closes the open question first
+        useWorkbench().block = null;
+        endScreenOpen.value = true;
+        await nextTick();
+        expect(post).toHaveBeenLastCalledWith(
+            { type: "input:preview:goto", block: END_SCREEN },
+            window.location.origin,
+        );
+
+        useWorkbench().block = second;
+        await nextTick();
+        expect(post).toHaveBeenLastCalledWith(
+            { type: "input:preview:goto", block: "q2uuid" },
+            window.location.origin,
+        );
+    });
+
+    it("loads the form again at the end screen after its save", async () => {
+        const wrapper = mountFrame(null, realPinia());
+        endScreenOpen.value = true;
+        await nextTick();
+        const before = wrapper.get("iframe").element;
+
+        useNotice().clearSaveError("saveEndScreen");
+        await nextTick();
+        await nextTick();
+
+        const iframe = wrapper.get("iframe");
+        expect(iframe.element).not.toBe(before);
+        expect(iframe.attributes("src")).toBe(`/form1?preview=1&block=${END_SCREEN}`);
+    });
+
     it("opens the question the preview moves on to", () => {
         const wrapper = mountFrame();
 
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.vue b/resources/js/components/Factory/Preview/PreviewFrame.vue
index ef17170f..3e9f2841 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.vue
+++ b/resources/js/components/Factory/Preview/PreviewFrame.vue
@@ -11,13 +11,15 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onBeforeUnmount, ref, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
 import { useEventListener } from "@vueuse/core";
 import { useForm, useLogic, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
+import { endScreenOpen } from "@/components/Factory/Document/blockFocus";
 import type { PreviewMessage } from "@/forms/classic/usePreviewMessages";
+import { END_SCREEN } from "@/forms/classic/previewTarget";
 
-// the question the preview shows, and an open one it didn't go to
+// the question (or END_SCREEN) the preview shows, and an open one it didn't go to
 const shown = defineModel<string | null>("shown", { default: null });
 const missed = defineModel<string | null>("missed", { default: null });
 
@@ -26,11 +28,16 @@ const workbench = useWorkbench();
 const origin = window.location.origin;
 const frame = ref<HTMLIFrameElement | null>(null);
 
+// the open question, or the end screen while its card is open
+const target = computed(
+  () => workbench.block?.uuid ?? (endScreenOpen.value ? END_SCREEN : null),
+);
+
 const url = () => {
   const query = new URLSearchParams({ preview: "1" });
 
-  if (workbench.block) {
-    query.set("block", workbench.block.uuid);
+  if (target.value) {
+    query.set("block", target.value);
   }
 
   return `${window.route("forms.show", { uuid: store.form?.uuid }, false)}?${query}`;
@@ -39,12 +46,9 @@ const url = () => {
 // the questions load after the panel: start at the open one, not at the
 // first and then jump; a panel opened later with none open starts at once
 const src = ref(store.blocks ? url() : undefined);
-watch(
-  () => workbench.block,
-  (block) => {
-    if (block) src.value ??= url();
-  },
-);
+watch(target, (block) => {
+  if (block) src.value ??= url();
+});
 const loads = ref(0);
 // the preview tells where it starts, then each question it moves on to
 let started = false;
@@ -117,15 +121,12 @@ useLogic().$onAction(({ name, after }) => {
   if (name === "saveSingleRule") after(() => nextTick(reload));
 });
 
-watch(
-  () => workbench.block?.uuid,
-  (block) => {
-    if (block && block !== followed) {
-      goto(block);
-    }
-    followed = null;
-  },
-);
+watch(target, (block) => {
+  if (block && block !== followed) {
+    goto(block);
+  }
+  followed = null;
+});
 
 useEventListener(window, "message", async (event: MessageEvent) => {
   const data = event.data as PreviewMessage | undefined;
@@ -148,8 +149,8 @@ useEventListener(window, "message", async (event: MessageEvent) => {
   // or the preview loaded after the owner opened another one
   if (!started) {
     started = true;
-    if (workbench.block && workbench.block.uuid !== data.block) {
-      goto(workbench.block.uuid);
+    if (target.value && target.value !== data.block) {
+      goto(target.value);
     }
     return;
   }
diff --git a/resources/js/forms/classic/previewTarget.ts b/resources/js/forms/classic/previewTarget.ts
new file mode 100644
index 00000000..f530c7e2
--- /dev/null
+++ b/resources/js/forms/classic/previewTarget.ts
@@ -0,0 +1,2 @@
+// the end screen has no uuid: the editor's preview names it so, in its messages and its address
+export const END_SCREEN = "end";
diff --git a/resources/js/forms/classic/usePreviewMessages.test.ts b/resources/js/forms/classic/usePreviewMessages.test.ts
index ffa07697..a14b7dfb 100644
--- a/resources/js/forms/classic/usePreviewMessages.test.ts
+++ b/resources/js/forms/classic/usePreviewMessages.test.ts
@@ -3,7 +3,11 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { setActivePinia, createPinia } from 'pinia';
 import { effectScope, nextTick } from 'vue';
 import { useConversation } from '@/stores/conversation';
+import { callSubmitForm } from '@/api/conversation';
 import { usePreviewMessages } from './usePreviewMessages';
+import { END_SCREEN } from './previewTarget';
+
+vi.mock('@/api/conversation', () => ({ callSubmitForm: vi.fn() }));
 
 const block = (id: string) => ({ id, type: 'input-short', parent_block: null, interactions: [] }) as unknown as PublicFormBlockModel;
 
@@ -47,6 +51,21 @@ describe('usePreviewMessages', () => {
     expect(store.current).toBe('q3');
   });
 
+  it('shows the end screen when the editor asks for it, sending nothing, and a question again after', async () => {
+    fromEditor({ type: 'input:preview:goto', block: END_SCREEN });
+    await nextTick();
+
+    expect(store.isSubmitted).toBe(true);
+    expect(callSubmitForm).not.toHaveBeenCalled();
+    expect(postMessage).toHaveBeenLastCalledWith({ type: 'input:preview:block', block: END_SCREEN }, window.location.origin);
+
+    fromEditor({ type: 'input:preview:goto', block: 'q1' });
+    await nextTick();
+
+    expect(store.isSubmitted).toBe(false);
+    expect(postMessage).toHaveBeenLastCalledWith({ type: 'input:preview:block', block: 'q1' }, window.location.origin);
+  });
+
   it.each([
     ['a message from another origin', { type: 'input:preview:goto', block: 'q3' }, { origin: 'https://evil.example' }],
     ['a message from another window', { type: 'input:preview:goto', block: 'q3' }, { source: null }],
diff --git a/resources/js/forms/classic/usePreviewMessages.ts b/resources/js/forms/classic/usePreviewMessages.ts
index b418514c..7ac54d58 100644
--- a/resources/js/forms/classic/usePreviewMessages.ts
+++ b/resources/js/forms/classic/usePreviewMessages.ts
@@ -1,8 +1,10 @@
 import { watch } from "vue";
 import { useEventListener } from "@vueuse/core";
 import { useConversation } from "@/stores/conversation";
+import { END_SCREEN } from "./previewTarget";
 
-// messages between the editor and the form in its preview frame, both on the same origin
+// messages between the editor and the form in its preview frame, both on the same origin;
+// a block is a question's uuid or END_SCREEN
 export type PreviewMessage =
     // the form shows this question
     | { type: "input:preview:block"; block: string }
@@ -14,7 +16,7 @@ export function usePreviewMessages() {
     const origin = window.location.origin;
 
     watch(
-        () => store.current,
+        () => (store.isSubmitted ? END_SCREEN : store.current),
         (block) => {
             if (block) {
                 const message: PreviewMessage = {
diff --git a/resources/js/stores/conversation.ts b/resources/js/stores/conversation.ts
index 6d7f56bc..bb66ae20 100644
--- a/resources/js/stores/conversation.ts
+++ b/resources/js/stores/conversation.ts
@@ -10,6 +10,7 @@ import { evaluateGotoLogic, isBlockVisible } from "./helpers/logic";
 import { createFlatQueue } from "./helpers/queue";
 import { prefillPayload } from "./helpers/prefill";
 import { isAllowedLink } from "@/utils/sanitize";
+import { END_SCREEN } from "@/forms/classic/previewTarget";
 import { nextTick, Ref, ref } from "vue";
 
 type ConversationStore = {
@@ -367,8 +368,14 @@ export const useConversation = defineStore("form", {
             }
         },
 
-        // the preview starts at any shown question, as if the respondent had come along the way to it
+        // the preview starts at any shown question, as if the respondent had come along the way to it,
+        // or at the end screen, without sending anything
         startAt(blockId: string) {
+            if (blockId === END_SCREEN) {
+                this.isSubmitted = true;
+                return;
+            }
+
             const index = this.findBlockIndex(blockId);
 
             if (index === -1) {

From 6f6e0b6c858a1bcd59e22b16910cb769f153934c Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:19:11 +0200
Subject: [PATCH 02/11] fix: call the completion page "End screen" in Settings
 too

Same name as the end block in the document. The #completion-page link
and the code names stay.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Settings.vue                         | 2 +-
 .../js/components/Factory/Settings/CompletionPage.test.ts     | 2 +-
 resources/js/components/Factory/Settings/CompletionPage.vue   | 2 +-
 .../Factory/Settings/partials/CompletionPageType.vue          | 4 ++--
 resources/js/components/Factory/Shared/Editor.test.ts         | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/js/Pages/Forms/Settings.vue b/resources/js/Pages/Forms/Settings.vue
index a8712d4a..e6e6fbc0 100644
--- a/resources/js/Pages/Forms/Settings.vue
+++ b/resources/js/Pages/Forms/Settings.vue
@@ -92,7 +92,7 @@ const navigation: Array<{
   { name: "Options", component: Options, slug: "options" },
   { name: "Privacy", component: Privacy, slug: "privacy" },
   {
-    name: "Completion Page",
+    name: "End screen",
     component: CompletionPage,
     slug: "completion-page",
   },
diff --git a/resources/js/components/Factory/Settings/CompletionPage.test.ts b/resources/js/components/Factory/Settings/CompletionPage.test.ts
index b8763d72..cfb59c29 100644
--- a/resources/js/components/Factory/Settings/CompletionPage.test.ts
+++ b/resources/js/components/Factory/Settings/CompletionPage.test.ts
@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from "vitest";
 import CompletionPage from "./CompletionPage.vue";
 import { useForm } from "@/stores";
 
-describe("completion page", () => {
+describe("end screen settings", () => {
     it("ties the Message label to its editor", async () => {
         useForm().form = { uuid: "form1" } as FormModel;
         const wrapper = mount(CompletionPage, {
diff --git a/resources/js/components/Factory/Settings/CompletionPage.vue b/resources/js/components/Factory/Settings/CompletionPage.vue
index d88191ee..5a04589b 100644
--- a/resources/js/components/Factory/Settings/CompletionPage.vue
+++ b/resources/js/components/Factory/Settings/CompletionPage.vue
@@ -178,7 +178,7 @@
     <D9Button
       class="mt-8"
       type="submit"
-      label="Save Completion Page"
+      label="Save end screen"
       :is-loading="isSaving"
     />
   </form>
diff --git a/resources/js/components/Factory/Settings/partials/CompletionPageType.vue b/resources/js/components/Factory/Settings/partials/CompletionPageType.vue
index 249a563f..0ac0c93a 100644
--- a/resources/js/components/Factory/Settings/partials/CompletionPageType.vue
+++ b/resources/js/components/Factory/Settings/partials/CompletionPageType.vue
@@ -61,8 +61,8 @@ import { D9Icon } from "@deck9/ui";
 const mailingLists = [
   {
     id: 1,
-    title: "Show completion page",
-    description: "Configure a custom completion page",
+    title: "Show end screen",
+    description: "Configure a custom end screen",
     value: false,
   },
   {
diff --git a/resources/js/components/Factory/Shared/Editor.test.ts b/resources/js/components/Factory/Shared/Editor.test.ts
index 2140bcb1..6caa4c57 100644
--- a/resources/js/components/Factory/Shared/Editor.test.ts
+++ b/resources/js/components/Factory/Shared/Editor.test.ts
@@ -4,7 +4,7 @@ import { describe, expect, it } from "vitest";
 import { nextTick } from "vue";
 import Editor from "./Editor.vue";
 
-// HTML as the tiptap 2 editor saved it for block texts and completion pages
+// HTML as the tiptap 2 editor saved it for block texts and end screens
 const stored =
   '<h2>Welcome</h2><h3>Before you start</h3><p>Some <strong>bold</strong>, <em>italic</em> and <u>underlined</u> text with <code>inline code</code> and a <a target="_blank" rel="noopener noreferrer nofollow" href="https://example.com">link</a>.</p><p>Line one<br>Line two</p><p>Above</p><p></p><p>Below</p><ul><li><p>First</p></li><li><p>Second</p></li></ul><ol><li><p>One</p></li><li><p>Two</p></li></ol><blockquote><p>A quote</p></blockquote><p><span style="font-family: Georgia;">Pasted font</span></p><img src="https://example.com/image.png">';
 

From 61b88463c47fcdeaedca8fc4796a33ebabd36e83 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:25:22 +0200
Subject: [PATCH 03/11] docs: add changelog line for #280

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cd5af102..4f3c8c21 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   Deleting a question, a group, an answer choice, a consent policy or a logic rule in the form editor now asks first in the app's own dialog. It names the question, how many answers will be deleted with it, and the questions whose rules will stop working. A choice nobody picked, or a policy nobody agreed to, is still deleted at once. (#269)
 -   Each rule now shows as a sentence under its question, and a group says when it's hidden. Edit changes a rule right there, and for choices, ratings and scales you pick the answer instead of typing it. A rule whose question was deleted shows in red and can't be saved until you fix it. (#274)
 -   The form editor uses plain words: a question's settings are headed by its answer type, like Choices or Rating, "Identifier" is now "Short name", and every switch shows on or off. Settings name what they do, like "Lowest value", "Shuffle choices" and "None ticked: all types allowed." on file uploads. (#279)
+-   The editor's preview shows the end screen while you edit it, with your latest text, and says so when your form sends people to a link instead. Settings now calls the Completion Page "End screen", like the editor. (#280)
 
 ### Fixed
 

From 474f4e7aa849690d914474012a342eb0a0609bb3 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:26:50 +0200
Subject: [PATCH 04/11] fix: open the end screen's button in a new tab in the
 preview

In the editor's preview the button took the whole editor tab to its
link. Outside the preview it still opens in the same tab.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../classic/layout/CallToActionButton.vue     |  5 ++-
 .../classic/layout/FormSubmittedPage.test.ts  | 41 +++++++++++++++++++
 .../classic/layout/FormSubmittedPage.vue      |  1 +
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/forms/classic/layout/FormSubmittedPage.test.ts

diff --git a/resources/js/forms/classic/layout/CallToActionButton.vue b/resources/js/forms/classic/layout/CallToActionButton.vue
index 1fbdf14c..b7f308fc 100644
--- a/resources/js/forms/classic/layout/CallToActionButton.vue
+++ b/resources/js/forms/classic/layout/CallToActionButton.vue
@@ -4,7 +4,8 @@
       :href="href"
       ref="button"
       :class="{ 'pointer-events-none opacity-50': isProcessing || isDisabled }"
-      target="_top"
+      :target="newTab ? '_blank' : '_top'"
+      :rel="newTab ? 'noopener noreferrer' : undefined"
       class="relative rounded-md border border-transparent !bg-primary px-5 py-1 font-medium !text-contrast no-underline shadow transition duration-200 hover:bg-primary/75 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 sm:px-10"
     >
       <span :class="{ invisible: isProcessing }">{{ label }}</span>
@@ -27,6 +28,8 @@ defineProps<{
   isProcessing?: boolean;
   label: string;
   href?: string;
+  // in the editor's preview frame: the editor must stay
+  newTab?: boolean;
 }>();
 
 const button = ref<HTMLElement | null>(null);
diff --git a/resources/js/forms/classic/layout/FormSubmittedPage.test.ts b/resources/js/forms/classic/layout/FormSubmittedPage.test.ts
new file mode 100644
index 00000000..adbfb553
--- /dev/null
+++ b/resources/js/forms/classic/layout/FormSubmittedPage.test.ts
@@ -0,0 +1,41 @@
+import { mount } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
+import { describe, expect, it } from "vitest";
+import FormSubmittedPage from "./FormSubmittedPage.vue";
+import { useConversation } from "@/stores/conversation";
+
+const mountPage = (isPreview: boolean) => {
+    const pinia = createPinia();
+    setActivePinia(pinia);
+
+    const store = useConversation();
+    store.form = {
+        uuid: "form",
+        show_cta_link: true,
+        cta_label: "Book a table",
+        cta_link: "https://example.com/book",
+    } as PublicFormModel;
+    store.session = { token: "session" } as FormSessionModel;
+    store.isPreview = isPreview;
+
+    return mount(FormSubmittedPage, { global: { plugins: [pinia] } });
+};
+
+describe("the end screen's button", () => {
+    it("takes people to its link in the same tab, also out of an embed", () => {
+        const link = mountPage(false).get("a");
+
+        expect(link.attributes("href")).toBe("https://example.com/book");
+        expect(link.attributes("target")).toBe("_top");
+        expect(link.attributes("rel")).toBeUndefined();
+    });
+
+    // the editor's preview runs the form in a frame: the editor must stay
+    it("opens its link in a new tab in preview mode", () => {
+        const link = mountPage(true).get("a");
+
+        expect(link.attributes("href")).toBe("https://example.com/book");
+        expect(link.attributes("target")).toBe("_blank");
+        expect(link.attributes("rel")).toBe("noopener noreferrer");
+    });
+});
diff --git a/resources/js/forms/classic/layout/FormSubmittedPage.vue b/resources/js/forms/classic/layout/FormSubmittedPage.vue
index 805215b3..78410b94 100644
--- a/resources/js/forms/classic/layout/FormSubmittedPage.vue
+++ b/resources/js/forms/classic/layout/FormSubmittedPage.vue
@@ -11,6 +11,7 @@
         v-if="store.form?.show_cta_link && store.callToActionUrl"
         :href="store.callToActionUrl"
         :label="store.form?.cta_label ?? t('close')"
+        :new-tab="store.isPreview"
       />
       <SocialLinks v-if="store.form?.show_social_links" class="mt-8" />
     </div>

From dd6cfb80084a0325ee0222569fc742f5956f4035 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:27:06 +0200
Subject: [PATCH 05/11] docs: say "End screen" in the #271 changelog line, add
 the button to #280's

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4f3c8c21..3d7a49b5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,7 +15,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   The form's team can try a form in preview mode, also while it's a draft. Answers in preview mode are never stored or counted and send no webhooks or emails. (#266)
 -   Add `?preview=1` to your form's link to try it as a member of its team. Nothing is stored, files aren't uploaded and the form doesn't redirect at the end. (#270)
 -   Add a question right where you need it: between questions or from a question's menu, and type "/" in an empty question to pick its answer type. A picker groups the answer types as Text, Choice, Rating, Other and Content, and the new question opens ready to type. The answer types have new names, like Single choice, Short text and Text only. (#276)
--   The form editor shows the end screen as the last block of your form. You can edit its headline, text and button right there, and the Completion Page in Settings shows the same values. (#271)
+-   The form editor shows the end screen as the last block of your form. You can edit its headline, text and button right there, and the End screen tab in Settings shows the same values. (#271)
 -   "Preview" in the editor shows your form beside the questions, on tablet and phone as a panel. It follows the question you edit, and the editor follows when you click Next in it. On the other form pages, "Preview" opens your form in a new tab in preview mode. Answers in either preview aren't saved. (#273)
 
 ### Changed
@@ -30,7 +30,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   Deleting a question, a group, an answer choice, a consent policy or a logic rule in the form editor now asks first in the app's own dialog. It names the question, how many answers will be deleted with it, and the questions whose rules will stop working. A choice nobody picked, or a policy nobody agreed to, is still deleted at once. (#269)
 -   Each rule now shows as a sentence under its question, and a group says when it's hidden. Edit changes a rule right there, and for choices, ratings and scales you pick the answer instead of typing it. A rule whose question was deleted shows in red and can't be saved until you fix it. (#274)
 -   The form editor uses plain words: a question's settings are headed by its answer type, like Choices or Rating, "Identifier" is now "Short name", and every switch shows on or off. Settings name what they do, like "Lowest value", "Shuffle choices" and "None ticked: all types allowed." on file uploads. (#279)
--   The editor's preview shows the end screen while you edit it, with your latest text, and says so when your form sends people to a link instead. Settings now calls the Completion Page "End screen", like the editor. (#280)
+-   The editor's preview shows the end screen while you edit it, with your latest text, and says so when your form sends people to a link instead. Its button opens in a new tab there, so you stay in the editor. Settings now calls the Completion Page "End screen", like the editor. (#280)
 
 ### Fixed
 

From be5e3e2e98cca1e245bd90f9fcc148f54e2924b4 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:57:27 +0200
Subject: [PATCH 06/11] fix: keep the cursor in the editor when the preview
 moves

The preview's form put the cursor in its own field after each move, so
typing in a question just opened went into the preview. In preview mode
the form now never takes the focus on its own.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/forms/classic/ClassicForm.test.ts      | 73 +++++++++++++++++++
 resources/js/forms/classic/ClassicForm.vue    | 11 +--
 2 files changed, 79 insertions(+), 5 deletions(-)
 create mode 100644 resources/js/forms/classic/ClassicForm.test.ts

diff --git a/resources/js/forms/classic/ClassicForm.test.ts b/resources/js/forms/classic/ClassicForm.test.ts
new file mode 100644
index 00000000..8a2c68ca
--- /dev/null
+++ b/resources/js/forms/classic/ClassicForm.test.ts
@@ -0,0 +1,73 @@
+import { enableAutoUnmount, flushPromises, mount } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { defineComponent, h, Suspense } from "vue";
+import { useConversation } from "@/stores/conversation";
+import ClassicForm from "./ClassicForm.vue";
+
+vi.mock("@/utils/useRoutes", () => ({ useRoutes: vi.fn(async () => ({})) }));
+
+const question = (id: string) => ({
+    id,
+    type: "input-short",
+    title: id,
+    parent_block: null,
+    is_required: false,
+    logics: [],
+    interactions: [{ id: `${id}-input`, type: "input", label: "Your answer" }],
+});
+
+vi.mock("@/api/conversation", () => ({
+    callCreateFormSession: vi.fn(async () => ({ data: { token: "session" } })),
+    callGetFormStoryboard: vi.fn(async () => ({
+        data: { blocks: [question("q1"), question("q2")] },
+    })),
+    callSubmitForm: vi.fn(),
+}));
+
+enableAutoUnmount(afterEach);
+
+const mountForm = async (search: string) => {
+    window.history.replaceState(null, "", `/form1${search}`);
+    const pinia = createPinia();
+    setActivePinia(pinia);
+
+    const Page = defineComponent(() => () =>
+        h(Suspense, null, {
+            default: () =>
+                h(ClassicForm, {
+                    settings: { uuid: "form1", name: "Form", language: "en" } as PublicFormModel,
+                    flags: {} as EmbedFlags,
+                }),
+        }),
+    );
+    mount(Page, { attachTo: document.body, global: { plugins: [pinia] } });
+    await flushPromises();
+
+    // the form moves to the next question, or the editor sends the preview there
+    useConversation().startAt("q2");
+    await flushPromises();
+};
+
+describe("the public form", () => {
+    afterEach(() => {
+        delete (window as { iptSettings?: unknown }).iptSettings;
+        (document.activeElement as HTMLElement | null)?.blur();
+    });
+
+    it("puts the cursor in the next question's field", async () => {
+        await mountForm("");
+
+        expect(document.activeElement?.tagName).toBe("INPUT");
+    });
+
+    // the editor's preview frame: the cursor must stay in the editor
+    it("never takes the focus on its own in preview mode", async () => {
+        window.iptSettings = {} as typeof window.iptSettings;
+        await mountForm("?preview=1&block=q1");
+
+        expect(useConversation().isPreview).toBe(true);
+        expect(useConversation().current).toBe("q2");
+        expect(document.activeElement).toBe(document.body);
+    });
+});
diff --git a/resources/js/forms/classic/ClassicForm.vue b/resources/js/forms/classic/ClassicForm.vue
index a230da70..b8dafcf6 100644
--- a/resources/js/forms/classic/ClassicForm.vue
+++ b/resources/js/forms/classic/ClassicForm.vue
@@ -89,19 +89,20 @@ const props = defineProps<{
   flags: EmbedFlags;
 }>();
 
+// the editor's preview runs on the form page, an embed on another site never does
+const query = new URLSearchParams(window.location.search);
+const isPreview = !!window.iptSettings && query.get("preview") === "1";
+
 const isLoading = ref(true);
+// the preview never takes the cursor from the editor around it
 const focusDisabled = computed(() => {
-  return isLoading.value && !props.flags.autofocus;
+  return isPreview || (isLoading.value && !props.flags.autofocus);
 });
 provide("disableFocus", focusDisabled);
 
 // init routes
 await useRoutes();
 
-// the editor's preview runs on the form page, an embed on another site never does
-const query = new URLSearchParams(window.location.search);
-const isPreview = !!window.iptSettings && query.get("preview") === "1";
-
 // init conversation store
 const store = useConversation();
 await store.initForm(

From bb54d3fe1bd84b2318b19a337498096fcecb2f92 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 12:00:08 +0200
Subject: [PATCH 07/11] fix: say "No end screen" only for a web link, as the
 form redirects

The public form only goes to an http(s) link. With a mailto: link it
shows the end screen, so the document and the preview now show it too.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/EndScreenBlock.test.ts         |  9 +++++++++
 .../components/Factory/Document/EndScreenBlock.vue  | 11 +++++++++--
 .../components/Factory/Preview/FormPreview.test.ts  | 13 +++++++++++++
 .../js/components/Factory/Preview/FormPreview.vue   |  5 ++++-
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 53bf9330..279e4262 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -459,6 +459,15 @@ describe("the end screen in the document", () => {
         );
     });
 
+    // the public form only goes to a web link, else it shows the end screen
+    it("shows the end screen when the link isn't a web link", () => {
+        useForm().form = { ...form, use_cta_redirect: true, cta_link: "mailto:hi@example.com" };
+        const block = mountBlock();
+
+        expect(block.text()).not.toContain("No end screen");
+        expect(block.find("button").text()).toContain("See you on Thursday!");
+    });
+
     it("stays in step with the Settings page through the form store", async () => {
         const block = await open();
         await block.find("#end-screen-headline").setValue("Thanks!");
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index f56e3cc9..d222d88c 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -8,12 +8,12 @@
 
     <!-- the public form then skips the end screen -->
     <div
-      v-if="store.form?.use_cta_redirect"
+      v-if="redirects"
       class="min-h-14 min-w-0 flex-1 px-3 py-2.5 text-sm text-grey-700"
     >
       <p class="break-words">
         <span class="font-medium text-grey-900">No end screen:</span>
-        people go to {{ store.form.cta_link }}
+        people go to {{ store.form?.cta_link }}
       </p>
       <Link :href="settingsLink" class="text-xs text-grey-600 underline"
         >Change in Settings</Link
@@ -135,6 +135,7 @@ import debounce from "lodash/debounce";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
 import { keepAlive } from "@/api/handler";
+import { isAllowedLink } from "@/utils/sanitize";
 import Editor from "@/components/Factory/Shared/Editor.vue";
 import { freshFormLoaded, trackFormSave } from "@/utils/useFreshForm";
 import { plainText } from "./questionSummary";
@@ -151,6 +152,12 @@ const settingsLink = computed(
   () =>
     `${window.route("forms.settings", { uuid: store.form?.uuid })}#completion-page`,
 );
+// the public form only goes to a web link, else it shows the end screen
+const redirects = computed(
+  () =>
+    store.form?.use_cta_redirect &&
+    isAllowedLink(store.form.cta_link, ["http:", "https:"]),
+);
 const text = computed(() => plainText(store.form?.eoc_text ?? null));
 // the public form shows the button only with a link
 const hasButton = computed(
diff --git a/resources/js/components/Factory/Preview/FormPreview.test.ts b/resources/js/components/Factory/Preview/FormPreview.test.ts
index e1449a9d..42ccf7e4 100644
--- a/resources/js/components/Factory/Preview/FormPreview.test.ts
+++ b/resources/js/components/Factory/Preview/FormPreview.test.ts
@@ -185,6 +185,19 @@ describe("the preview panel", () => {
         expect(frame.isVisible()).toBe(true);
     });
 
+    it("shows the end screen when the link isn't a web link, as the public form does", async () => {
+        screen(true);
+        useForm().form = { use_cta_redirect: true, cta_link: "mailto:hi@example.com" } as FormModel;
+        const wrapper = mountPreview();
+
+        const frame = wrapper.findComponent(PreviewFrame);
+        frame.vm.$emit("update:shown", END_SCREEN);
+        await flushPromises();
+
+        expect(wrapper.text()).not.toContain("No end screen");
+        expect(frame.isVisible()).toBe(true);
+    });
+
     it.each([true, false])("shows nothing when closed (desktop: %s)", (wide) => {
         screen(wide);
         const wrapper = mountPreview(false);
diff --git a/resources/js/components/Factory/Preview/FormPreview.vue b/resources/js/components/Factory/Preview/FormPreview.vue
index 4b3dfa41..85847bfe 100644
--- a/resources/js/components/Factory/Preview/FormPreview.vue
+++ b/resources/js/components/Factory/Preview/FormPreview.vue
@@ -74,6 +74,7 @@ import { computed, ref, watch } from "vue";
 import { useForm, useWorkbench } from "@/stores";
 import { questionNumbers } from "@/components/Factory/Document/questionSummary";
 import { END_SCREEN } from "@/forms/classic/previewTarget";
+import { isAllowedLink } from "@/utils/sanitize";
 import PreviewFrame from "./PreviewFrame.vue";
 
 const open = defineModel<boolean>({ required: true });
@@ -97,7 +98,9 @@ const heading = computed(() => {
 });
 // the preview doesn't follow the link, so its end screen is one nobody sees
 const redirect = computed(() =>
-  shown.value === END_SCREEN && store.form?.use_cta_redirect
+  shown.value === END_SCREEN &&
+  store.form?.use_cta_redirect &&
+  isAllowedLink(store.form.cta_link, ["http:", "https:"])
     ? store.form.cta_link
     : undefined,
 );

From 83ec4a3d4ff4632e22c6d988e2ab019fd2b29c7a Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 12:00:20 +0200
Subject: [PATCH 08/11] docs: add the preview focus fix to #280's changelog
 line

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3d7a49b5..7c734d6d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,7 +30,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   Deleting a question, a group, an answer choice, a consent policy or a logic rule in the form editor now asks first in the app's own dialog. It names the question, how many answers will be deleted with it, and the questions whose rules will stop working. A choice nobody picked, or a policy nobody agreed to, is still deleted at once. (#269)
 -   Each rule now shows as a sentence under its question, and a group says when it's hidden. Edit changes a rule right there, and for choices, ratings and scales you pick the answer instead of typing it. A rule whose question was deleted shows in red and can't be saved until you fix it. (#274)
 -   The form editor uses plain words: a question's settings are headed by its answer type, like Choices or Rating, "Identifier" is now "Short name", and every switch shows on or off. Settings name what they do, like "Lowest value", "Shuffle choices" and "None ticked: all types allowed." on file uploads. (#279)
--   The editor's preview shows the end screen while you edit it, with your latest text, and says so when your form sends people to a link instead. Its button opens in a new tab there, so you stay in the editor. Settings now calls the Completion Page "End screen", like the editor. (#280)
+-   The editor's preview shows the end screen while you edit it, with your latest text, and says so when your form sends people to a link instead. Its button opens in a new tab there, so you stay in the editor, and typing in a question you just opened no longer goes into the preview. Settings now calls the Completion Page "End screen", like the editor. (#280)
 
 ### Fixed
 

From aadadaeb5a38e8092a298218978f1e163fe38d60 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 12:14:01 +0200
Subject: [PATCH 09/11] fix: let the preview move the cursor on once the owner
 clicks into it

The preview blocked focus all the time, so a keyboard user couldn't try
the form there. It now blocks focus only while its own window isn't
focused: the editor keeps the cursor, and Enter in the preview moves
on to the next question as on the real form.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/forms/classic/ClassicForm.test.ts      | 21 ++++++++++++++++++-
 resources/js/forms/classic/ClassicForm.vue    | 10 +++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/resources/js/forms/classic/ClassicForm.test.ts b/resources/js/forms/classic/ClassicForm.test.ts
index 8a2c68ca..1c9b8c50 100644
--- a/resources/js/forms/classic/ClassicForm.test.ts
+++ b/resources/js/forms/classic/ClassicForm.test.ts
@@ -62,12 +62,31 @@ describe("the public form", () => {
     });
 
     // the editor's preview frame: the cursor must stay in the editor
-    it("never takes the focus on its own in preview mode", async () => {
+    it("takes no focus in preview mode while the owner works in the editor", async () => {
         window.iptSettings = {} as typeof window.iptSettings;
         await mountForm("?preview=1&block=q1");
 
+        expect(document.hasFocus()).toBe(false);
         expect(useConversation().isPreview).toBe(true);
         expect(useConversation().current).toBe("q2");
         expect(document.activeElement).toBe(document.body);
     });
+
+    it("moves the cursor on in preview mode while the owner works in the preview", async () => {
+        window.iptSettings = {} as typeof window.iptSettings;
+        await mountForm("?preview=1&block=q1");
+
+        // a click into the frame focuses its window
+        window.dispatchEvent(new FocusEvent("focus"));
+        useConversation().startAt("q1");
+        await flushPromises();
+        expect(document.activeElement?.tagName).toBe("INPUT");
+
+        // back in the editor
+        (document.activeElement as HTMLElement).blur();
+        window.dispatchEvent(new FocusEvent("blur"));
+        useConversation().startAt("q2");
+        await flushPromises();
+        expect(document.activeElement).toBe(document.body);
+    });
 });
diff --git a/resources/js/forms/classic/ClassicForm.vue b/resources/js/forms/classic/ClassicForm.vue
index b8dafcf6..d884b3f3 100644
--- a/resources/js/forms/classic/ClassicForm.vue
+++ b/resources/js/forms/classic/ClassicForm.vue
@@ -80,6 +80,7 @@ import { useBeforeUnload } from "@/utils/useBeforeUnload";
 import { computed, onMounted, provide, ref } from "vue";
 import { storeToRefs } from "pinia";
 import { useI18n } from "vue-i18n";
+import { useWindowFocus } from "@vueuse/core";
 import { useRouteParams } from "@/utils/useRouteParams";
 import { useRoutes } from "@/utils/useRoutes";
 import { usePreviewMessages } from "@/forms/classic/usePreviewMessages";
@@ -94,9 +95,14 @@ const query = new URLSearchParams(window.location.search);
 const isPreview = !!window.iptSettings && query.get("preview") === "1";
 
 const isLoading = ref(true);
-// the preview never takes the cursor from the editor around it
+// the preview never takes the cursor from the editor around it,
+// but moves it on as the real form does once the owner clicks into it
+const windowFocused = useWindowFocus();
 const focusDisabled = computed(() => {
-  return isPreview || (isLoading.value && !props.flags.autofocus);
+  return (
+    (isPreview && !windowFocused.value) ||
+    (isLoading.value && !props.flags.autofocus)
+  );
 });
 provide("disableFocus", focusDisabled);
 

From 3ab955b585449bc967fd614180ccc6ce93ae7031 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 12:15:27 +0200
Subject: [PATCH 10/11] fix: close the preview panel on Esc inside the preview

On a tablet or phone the preview opens over the document. After a click
into the preview, Esc went to the form there and the panel stayed open.
The form in preview mode now tells the editor about Esc (same origin
both ways, like the other preview messages), and the panel closes with
focus back on the Preview button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.test.ts         | 21 +++++++++++++++++++
 .../Factory/Preview/FormPreview.vue           |  2 ++
 .../Factory/Preview/PreviewFrame.test.ts      | 13 ++++++++++++
 .../Factory/Preview/PreviewFrame.vue          | 15 ++++++++++---
 .../forms/classic/usePreviewMessages.test.ts  |  7 +++++++
 .../js/forms/classic/usePreviewMessages.ts    | 11 ++++++++--
 6 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/resources/js/Pages/Forms/Edit.test.ts b/resources/js/Pages/Forms/Edit.test.ts
index 74660edb..00704f77 100644
--- a/resources/js/Pages/Forms/Edit.test.ts
+++ b/resources/js/Pages/Forms/Edit.test.ts
@@ -4,6 +4,7 @@ import { AxiosResponse } from "axios";
 import { callGetForm } from "@/api/forms";
 import Edit from "./Edit.vue";
 import FormMenu from "@/components/Factory/TopBar/FormMenu.vue";
+import PreviewFrame from "@/components/Factory/Preview/PreviewFrame.vue";
 import { useForm, useWorkbench } from "@/stores";
 
 vi.mock("@/api/forms", async (importOriginal) => ({
@@ -164,6 +165,26 @@ describe("editor loading", () => {
         expect(preview?.attributes("aria-haspopup")).toBe("dialog");
     });
 
+    it("closes the preview on Esc inside it and puts focus back on Preview", async () => {
+        const editor = await mountEditor(loads(blocks), {
+            stubs: { ...stubs, FormPreview: false, PreviewFrame: true },
+            mocks: { route: () => "/" },
+        });
+        const preview = editor
+            .findAll("button")
+            .find((button) => button.text() === "Preview");
+        await preview?.trigger("click");
+        await flushPromises();
+        expect(document.activeElement?.closest("[role=dialog]")).not.toBeNull();
+
+        // after a click into the frame, the form there gets the key and tells the editor
+        editor.findComponent(PreviewFrame).vm.$emit("escape");
+        await flushPromises();
+
+        expect(document.querySelector("[role=dialog]")).toBeNull();
+        expect(document.activeElement).toBe(preview?.element);
+    });
+
     it("puts focus back on the form menu when a preview opened from it closes", async () => {
         // the menu item is gone by then, so the dialog can't focus it again
         const editor = await mountEditor(loads(blocks), {
diff --git a/resources/js/components/Factory/Preview/FormPreview.vue b/resources/js/components/Factory/Preview/FormPreview.vue
index 85847bfe..75cd09af 100644
--- a/resources/js/components/Factory/Preview/FormPreview.vue
+++ b/resources/js/components/Factory/Preview/FormPreview.vue
@@ -56,11 +56,13 @@
       <p v-if="isEmpty" class="w-80 max-w-full text-sm text-grey-600">
         Add a question to see it here.
       </p>
+      <!-- Esc after a click into the frame goes to the frame, not to the dialog -->
       <PreviewFrame
         v-else
         v-show="!redirect"
         v-model:shown="shown"
         v-model:missed="missed"
+        @escape="open = false"
       />
     </DialogPanel>
   </Dialog>
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.test.ts b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
index 93319a0a..d643947a 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.test.ts
+++ b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
@@ -234,6 +234,19 @@ describe("the preview frame", () => {
         expect(wrapper.emitted("update:shown")).toEqual([["q1uuid"], ["q2uuid"]]);
     });
 
+    // after a click into the frame, the form there gets the key
+    it("passes on Esc from the form in the frame, from no other origin or window", () => {
+        const wrapper = mountFrame();
+        const escape = { type: "input:preview:escape" };
+
+        fromFrame(wrapper, escape, { origin: "https://evil.example" });
+        fromFrame(wrapper, escape, { source: window });
+        expect(wrapper.emitted("escape")).toBeUndefined();
+
+        fromFrame(wrapper, escape);
+        expect(wrapper.emitted("escape")).toEqual([[]]);
+    });
+
     it("tells when the preview doesn't go to the open question, as when a rule hides it", async () => {
         vi.useFakeTimers();
         const wrapper = mountFrame();
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.vue b/resources/js/components/Factory/Preview/PreviewFrame.vue
index 3e9f2841..c0406cc2 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.vue
+++ b/resources/js/components/Factory/Preview/PreviewFrame.vue
@@ -22,6 +22,8 @@ import { END_SCREEN } from "@/forms/classic/previewTarget";
 // the question (or END_SCREEN) the preview shows, and an open one it didn't go to
 const shown = defineModel<string | null>("shown", { default: null });
 const missed = defineModel<string | null>("missed", { default: null });
+// Esc inside the frame
+const emit = defineEmits<{ escape: [] }>();
 
 const store = useForm();
 const workbench = useWorkbench();
@@ -134,13 +136,20 @@ useEventListener(window, "message", async (event: MessageEvent) => {
   if (
     event.origin !== origin ||
     !frame.value?.contentWindow ||
-    event.source !== frame.value.contentWindow ||
-    data?.type !== "input:preview:block" ||
-    typeof data.block !== "string"
+    event.source !== frame.value.contentWindow
   ) {
     return;
   }
 
+  if (data?.type === "input:preview:escape") {
+    emit("escape");
+    return;
+  }
+
+  if (data?.type !== "input:preview:block" || typeof data.block !== "string") {
+    return;
+  }
+
   shown.value = data.block;
   clearTimeout(waiting);
   missed.value = null;
diff --git a/resources/js/forms/classic/usePreviewMessages.test.ts b/resources/js/forms/classic/usePreviewMessages.test.ts
index a14b7dfb..7981ce1b 100644
--- a/resources/js/forms/classic/usePreviewMessages.test.ts
+++ b/resources/js/forms/classic/usePreviewMessages.test.ts
@@ -45,6 +45,13 @@ describe('usePreviewMessages', () => {
     expect(postMessage).toHaveBeenLastCalledWith({ type: 'input:preview:block', block: 'q2' }, window.location.origin);
   });
 
+  // the editor's panel around the frame doesn't get the key
+  it('tells the editor when Esc is pressed, only on its own origin', () => {
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+
+    expect(postMessage).toHaveBeenLastCalledWith({ type: 'input:preview:escape' }, window.location.origin);
+  });
+
   it('goes to the question the editor asks for', () => {
     fromEditor({ type: 'input:preview:goto', block: 'q3' });
 
diff --git a/resources/js/forms/classic/usePreviewMessages.ts b/resources/js/forms/classic/usePreviewMessages.ts
index 7ac54d58..9c0dcd8a 100644
--- a/resources/js/forms/classic/usePreviewMessages.ts
+++ b/resources/js/forms/classic/usePreviewMessages.ts
@@ -1,5 +1,5 @@
 import { watch } from "vue";
-import { useEventListener } from "@vueuse/core";
+import { onKeyStroke, useEventListener } from "@vueuse/core";
 import { useConversation } from "@/stores/conversation";
 import { END_SCREEN } from "./previewTarget";
 
@@ -9,7 +9,9 @@ export type PreviewMessage =
     // the form shows this question
     | { type: "input:preview:block"; block: string }
     // the editor asks for this question
-    | { type: "input:preview:goto"; block: string };
+    | { type: "input:preview:goto"; block: string }
+    // Esc goes to the frame, so the editor's panel around it gets it this way
+    | { type: "input:preview:escape" };
 
 export function usePreviewMessages() {
     const store = useConversation();
@@ -29,6 +31,11 @@ export function usePreviewMessages() {
         { immediate: true },
     );
 
+    onKeyStroke("Escape", () => {
+        const message: PreviewMessage = { type: "input:preview:escape" };
+        window.parent.postMessage(message, origin);
+    });
+
     useEventListener(window, "message", (event: MessageEvent) => {
         if (
             event.origin !== origin ||

From 1bb9bf6e718be5f33f819dcb97fc1c73d22b39f0 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 12:15:45 +0200
Subject: [PATCH 11/11] docs: add Esc in the preview to #280's changelog line

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7c734d6d..800dd2ee 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,7 +30,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   Deleting a question, a group, an answer choice, a consent policy or a logic rule in the form editor now asks first in the app's own dialog. It names the question, how many answers will be deleted with it, and the questions whose rules will stop working. A choice nobody picked, or a policy nobody agreed to, is still deleted at once. (#269)
 -   Each rule now shows as a sentence under its question, and a group says when it's hidden. Edit changes a rule right there, and for choices, ratings and scales you pick the answer instead of typing it. A rule whose question was deleted shows in red and can't be saved until you fix it. (#274)
 -   The form editor uses plain words: a question's settings are headed by its answer type, like Choices or Rating, "Identifier" is now "Short name", and every switch shows on or off. Settings name what they do, like "Lowest value", "Shuffle choices" and "None ticked: all types allowed." on file uploads. (#279)
--   The editor's preview shows the end screen while you edit it, with your latest text, and says so when your form sends people to a link instead. Its button opens in a new tab there, so you stay in the editor, and typing in a question you just opened no longer goes into the preview. Settings now calls the Completion Page "End screen", like the editor. (#280)
+-   The editor's preview shows the end screen while you edit it, with your latest text, and says so when your form sends people to a link instead. Its button opens in a new tab there, so you stay in the editor, and typing in a question you just opened no longer goes into the preview. On a tablet or phone, Esc closes the preview even after you clicked into it. Settings now calls the Completion Page "End screen", like the editor. (#280)
 
 ### Fixed