fix(users): next button in create form always disabled (#4443)

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
This commit is contained in:
Manuel
2025-11-10 15:02:14 +00:00
committed by GitHub
parent f648af0e2b
commit 1c1f8a48d2

View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { startTransition, useCallback, useMemo, useState } from "react"; import { startTransition, useCallback, useState } from "react";
import { import {
Badge, Badge,
Button, Button,
@@ -20,8 +20,9 @@ import { IconPlus, IconUserCheck } from "@tabler/icons-react";
import { z } from "zod/v4"; import { z } from "zod/v4";
import { clientApi } from "@homarr/api/client"; import { clientApi } from "@homarr/api/client";
import { everyoneGroup, groupPermissions } from "@homarr/definitions";
import type { GroupPermissionKey } from "@homarr/definitions"; import type { GroupPermissionKey } from "@homarr/definitions";
import { everyoneGroup, groupPermissions } from "@homarr/definitions";
import type { IsValid } from "@homarr/form";
import { useZodForm } from "@homarr/form"; import { useZodForm } from "@homarr/form";
import { useModalAction } from "@homarr/modals"; import { useModalAction } from "@homarr/modals";
import { showErrorNotification } from "@homarr/notifications"; import { showErrorNotification } from "@homarr/notifications";
@@ -113,11 +114,9 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
}, },
); );
const allForms = useMemo(() => [generalForm, securityForm, groupsForm], [generalForm, securityForm, groupsForm]); const allForms = [generalForm, securityForm, groupsForm];
const isValidCallback: IsValid<unknown> | undefined = allForms[active]?.isValid;
const activeForm = allForms[active]; const currentFormValid = isValidCallback?.() ?? true;
const isCurrentFormValid = activeForm ? activeForm.isValid : () => true;
const canNavigateToNextStep = isCurrentFormValid();
const controlledGoToNextStep = useCallback(async () => { const controlledGoToNextStep = useCallback(async () => {
if (active + 1 === stepperMax) { if (active + 1 === stepperMax) {
@@ -218,7 +217,7 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
</Stepper.Completed> </Stepper.Completed>
</Stepper> </Stepper>
<StepperNavigationComponent <StepperNavigationComponent
hasNext={hasNext && canNavigateToNextStep} hasNext={hasNext && currentFormValid}
hasPrevious={hasPrevious} hasPrevious={hasPrevious}
isComplete={active === stepperMax} isComplete={active === stepperMax}
isLoadingNextStep={isPending} isLoadingNextStep={isPending}