From 9faee160e99b3d08d6cb8abce7da1e880816adf3 Mon Sep 17 00:00:00 2001
From: Timo <16718859+toger5@users.noreply.github.com>
Date: Fri, 5 Dec 2025 14:45:18 +0100
Subject: [PATCH] Move `EditInPlace` out of `Form` (Fixes: reloading EW on EC
 url update) (#31434)

* Move `EditInPlace` out of `Form`

If it is part of the form saving will submit the inner form of
EditInPlace and reload EW.

* add tests and comments

* update snapshot

* fix playwright
---
 playwright/e2e/devtools/devtools.spec.ts               |  7 +++++++
 src/components/views/dialogs/DevtoolsDialog.tsx        | 10 +++++++++-
 .../dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap |  4 ++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/playwright/e2e/devtools/devtools.spec.ts b/playwright/e2e/devtools/devtools.spec.ts
index 051736e38b..1f9217d7eb 100644
--- a/playwright/e2e/devtools/devtools.spec.ts
+++ b/playwright/e2e/devtools/devtools.spec.ts
@@ -29,5 +29,12 @@ test.describe("Devtools", () => {
                 display: none;
             }`,
         });
+
+        // Try entering a value for the Developer.elementCallUrl setting
+        const input = page.getByRole("textbox", { name: "Element Call URL" });
+        await input.fill("https://example.com");
+        await input.press("Enter");
+        // expect EW NOT to reload
+        await page.getByText("Saved").isVisible();
     });
 });
diff --git a/src/components/views/dialogs/DevtoolsDialog.tsx b/src/components/views/dialogs/DevtoolsDialog.tsx
index 5d2d13b74f..5ac0478012 100644
--- a/src/components/views/dialogs/DevtoolsDialog.tsx
+++ b/src/components/views/dialogs/DevtoolsDialog.tsx
@@ -113,8 +113,16 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished })
                     <SettingsFlag name="developerMode" level={SettingLevel.ACCOUNT} />
                     <SettingsFlag name="showHiddenEventsInTimeline" level={SettingLevel.DEVICE} />
                     <SettingsFlag name="enableWidgetScreenshots" level={SettingLevel.ACCOUNT} />
-                    <SettingsField settingKey="Developer.elementCallUrl" level={SettingLevel.DEVICE} />
                 </Form.Root>
+                {/* The settings field needs to be outside `Form.Root` because `SettingsField` will have a inner Form,
+                    Otherwise we end up with a nester `Form` and that prohibits `preventDefault` so setting the value
+                    will reload the page.
+                 */}
+                <SettingsField
+                    settingKey="Developer.elementCallUrl"
+                    level={SettingLevel.DEVICE}
+                    aria-label="elementCallUrl"
+                />
             </BaseTool>
         );
     }
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
index 7db3667746..04e36322e0 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
@@ -217,6 +217,10 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             </label>
           </div>
         </div>
+      </form>
+      <form
+        class="_root_19upo_16"
+      >
         <div
           class="_field_19upo_26"
         >