diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/members/EditTeamName.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/members/EditTeamName.tsx index 38d1fe518f..8f8504ae46 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/members/EditTeamName.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/members/EditTeamName.tsx @@ -5,18 +5,27 @@ import { useTeamMutation } from "@/lib/teams/mutateTeams"; import { useTeam } from "@/lib/teams/teams"; import { Button, ErrorComponent, Input, Label } from "@formbricks/ui"; import { useEffect, useState } from "react"; -import { useForm } from "react-hook-form"; +import { useForm, useWatch } from "react-hook-form"; import toast from "react-hot-toast"; export default function EditTeamName({ environmentId }) { const { team, isLoadingTeam, isErrorTeam, mutateTeam } = useTeam(environmentId); - const { register, handleSubmit } = useForm(); + const { register, control, handleSubmit, setValue } = useForm(); const [teamId, setTeamId] = useState(""); + const teamName = useWatch({ + control, + name: "name", + }); + const isTeamNameInputEmpty = !teamName?.trim(); + const currentTeamName = teamName?.trim().toLowerCase() ?? ""; + const previousTeamName = team?.name?.trim().toLowerCase() ?? ""; + useEffect(() => { if (team && team.id !== "") { setTeamId(team.id); } + setValue("name", team?.name ?? ""); }, [team]); const { isMutatingTeam, triggerTeamMutate } = useTeamMutation(teamId); @@ -32,6 +41,12 @@ export default function EditTeamName({ environmentId }) {