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

@@ -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();
     });
 });

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>
         );
     }

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"
         >