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
2026-08-22 12:19:35 +02:00
1 changed files with 10 additions and 8 deletions
@@ -178,6 +178,7 @@ export const BoardSettingsForm = ({ board, permissions, hasFullAccess, hideVisib
  const isPending = savePartialSettings.isPending || saveLayouts.isPending;
  return (
    <Stack gap="xl">
      <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
        <Stack gap="xl">
          <GeneralSettingsContent board={board} form={form} />
@@ -187,14 +188,6 @@ export const BoardSettingsForm = ({ board, permissions, hasFullAccess, hideVisib
          <CustomCssSettingsContent form={form} />
          <BehaviorSettingsContent form={form} />
        {hasFullAccess && (
          <SectionCard title={tSection("access.title")}>
            <BoardAccessSettings board={board} initialPermissions={permissions} />
          </SectionCard>
        )}
        {hasFullAccess && <DangerZoneSettingsContent hideVisibility={hideVisibility} />}
          {form.isDirty() && (
            <UnsavedChangesBar>
              <Button type="button" disabled={isPending} variant="default" onClick={handleDiscard}>
@@ -207,6 +200,15 @@ export const BoardSettingsForm = ({ board, permissions, hasFullAccess, hideVisib
          )}
        </Stack>
      </form>
      {hasFullAccess && (
        <SectionCard title={tSection("access.title")}>
          <BoardAccessSettings board={board} initialPermissions={permissions} />
        </SectionCard>
      )}
      {hasFullAccess && <DangerZoneSettingsContent hideVisibility={hideVisibility} />}
    </Stack>
  );
 };