From 358b873aa703dbb6d9bcc0f4bcb0abc220f4695f Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Tue, 18 Nov 2025 07:25:12 +0530
Subject: [PATCH] fix: unable to update username (#25221)

* unable to update username

* update

* Add import for useEffect and useState hooks
---
 .../components/ui/UsernameAvailability/index.tsx    | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/apps/web/components/ui/UsernameAvailability/index.tsx b/apps/web/components/ui/UsernameAvailability/index.tsx
index dfbadb2b00..85395a1cff 100644
--- a/apps/web/components/ui/UsernameAvailability/index.tsx
+++ b/apps/web/components/ui/UsernameAvailability/index.tsx
@@ -6,7 +6,6 @@ import { Controller, useForm } from "react-hook-form";
 
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import { WEBSITE_URL, IS_SELF_HOSTED } from "@calcom/lib/constants";
-import slugify from "@calcom/lib/slugify";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/types/server/routers/_app";
 
@@ -42,9 +41,7 @@ export const UsernameAvailability = (props: ICustomUsernameProps) => {
   const { isPremium, disabled, ...otherProps } = props;
   const UsernameAvailabilityComponent = isPremium ? PremiumTextfield : UsernameTextfield;
   // PremiumTextfield uses `readonly` prop, UsernameTextfield uses `disabled` prop
-  const componentProps = isPremium
-    ? { ...otherProps, readonly: disabled }
-    : { ...otherProps, disabled };
+  const componentProps = isPremium ? { ...otherProps, readonly: disabled } : { ...otherProps, disabled };
   return <UsernameAvailabilityComponent {...componentProps} />;
 };
 
@@ -63,7 +60,7 @@ export const UsernameAvailabilityField = ({
       : { username: currentUsernameState || "", setQuery: setCurrentUsernameState };
   const formMethods = useForm({
     defaultValues: {
-      username: slugify(currentUsername || user.username || ""),
+      username: currentUsername,
     },
   });
 
@@ -85,11 +82,7 @@ export const UsernameAvailabilityField = ({
           setCurrentUsername={setCurrentUsername}
           inputUsernameValue={value}
           usernameRef={ref}
-          setInputUsernameValue={(val) => {
-            const displayValue = slugify(val, true);
-            formMethods.setValue("username", displayValue);
-            onChange?.(displayValue);
-          }}
+          setInputUsernameValue={onChange}
           onSuccessMutation={onSuccessMutation}
           onErrorMutation={onErrorMutation}
           disabled={disabled ?? !!user.organization?.id}