From 2d410b43f2d8e3663fab1a99e2cc88711b3f9eb1 Mon Sep 17 00:00:00 2001
From: ajnart <thomas@ajnart.fr>
Date: Sat, 22 Aug 2026 12:19:35 +0200
Subject: [PATCH] fix(settings): move board access control out of the nested
 form

The unified board settings form wrapped BoardAccessSettings (which renders
its own <form> via the user/group access forms) inside the outer board
settings <form>. Nested <form> elements are invalid HTML and cause React
hydration to fail (error #418), so the access save button's onSubmit never
runs and clicking 'Save group permission' only reloads the page without
persisting.

Fix: keep the six settings sections in the outer <form>, and render the
Access control and Danger zone sections outside it as siblings. This restores
the independent mutation/forms for access permissions, matching the original
intent of the unified settings form.

Closes #6653
---
 .../boards/[name]/settings/_settings-form.tsx | 54 ++++++++++---------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_settings-form.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_settings-form.tsx
index b8e66cf4b..c27f77c71 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_settings-form.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_settings-form.tsx
@@ -178,35 +178,37 @@ export const BoardSettingsForm = ({ board, permissions, hasFullAccess, hideVisib
   const isPending = savePartialSettings.isPending || saveLayouts.isPending;
 
   return (
-    <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
-      <Stack gap="xl">
-        <GeneralSettingsContent board={board} form={form} />
-        <LayoutSettingsContent form={form} />
-        <BackgroundSettingsContent form={form} />
-        <ColorSettingsContent form={form} />
-        <CustomCssSettingsContent form={form} />
-        <BehaviorSettingsContent form={form} />
+    <Stack gap="xl">
+      <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
+        <Stack gap="xl">
+          <GeneralSettingsContent board={board} form={form} />
+          <LayoutSettingsContent form={form} />
+          <BackgroundSettingsContent form={form} />
+          <ColorSettingsContent form={form} />
+          <CustomCssSettingsContent form={form} />
+          <BehaviorSettingsContent form={form} />
 
-        {hasFullAccess && (
-          <SectionCard title={tSection("access.title")}>
-            <BoardAccessSettings board={board} initialPermissions={permissions} />
-          </SectionCard>
-        )}
+          {form.isDirty() && (
+            <UnsavedChangesBar>
+              <Button type="button" disabled={isPending} variant="default" onClick={handleDiscard}>
+                {t("common.action.discard")}
+              </Button>
+              <Button loading={isPending} type="submit" disabled={!form.isValid()}>
+                {t("common.action.saveChanges")}
+              </Button>
+            </UnsavedChangesBar>
+          )}
+        </Stack>
+      </form>
 
-        {hasFullAccess && <DangerZoneSettingsContent hideVisibility={hideVisibility} />}
+      {hasFullAccess && (
+        <SectionCard title={tSection("access.title")}>
+          <BoardAccessSettings board={board} initialPermissions={permissions} />
+        </SectionCard>
+      )}
 
-        {form.isDirty() && (
-          <UnsavedChangesBar>
-            <Button type="button" disabled={isPending} variant="default" onClick={handleDiscard}>
-              {t("common.action.discard")}
-            </Button>
-            <Button loading={isPending} type="submit" disabled={!form.isValid()}>
-              {t("common.action.saveChanges")}
-            </Button>
-          </UnsavedChangesBar>
-        )}
-      </Stack>
-    </form>
+      {hasFullAccess && <DangerZoneSettingsContent hideVisibility={hideVisibility} />}
+    </Stack>
   );
 };