From 04ff49571d39811e842f30dfc85e0b31a0d1814c Mon Sep 17 00:00:00 2001
From: John Raptis <johnsitpar@gmail.com>
Date: Fri, 11 Aug 2023 11:39:53 +0300
Subject: [PATCH] fix(clerk-js): Allow to delete username if optional

fix(clerk-js): Add changeset message

fix(clerk-js): Add changeset message

fix(clerk-js): Add changeset message
---
 .changeset/red-deers-happen.md                            | 5 +++++
 .../src/ui/components/UserProfile/UsernamePage.tsx        | 8 ++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/red-deers-happen.md

diff --git a/.changeset/red-deers-happen.md b/.changeset/red-deers-happen.md
new file mode 100644
index 00000000000..13c688bea49
--- /dev/null
+++ b/.changeset/red-deers-happen.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix a bug where it was not possible to delete the username if it was optional.
\ No newline at end of file
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UsernamePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/UsernamePage.tsx
index 56db3b4e227..0024f4d96c9 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UsernamePage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UsernamePage.tsx
@@ -1,5 +1,5 @@
 import { useWizard, Wizard } from '../../common';
-import { useCoreUser } from '../../contexts';
+import { useCoreUser, useEnvironment } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { ContentPage, Form, FormButtons, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
 import { handleError, useFormControl } from '../../utils';
@@ -7,6 +7,7 @@ import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 
 export const UsernamePage = withCardStateProvider(() => {
   const user = useCoreUser();
+  const { userSettings } = useEnvironment();
   const card = useCardState();
   const wizard = useWizard();
   const usernameField = useFormControl('username', user.username || '', {
@@ -15,7 +16,10 @@ export const UsernamePage = withCardStateProvider(() => {
     placeholder: localizationKeys('formFieldInputPlaceholder__username'),
   });
 
-  const canSubmit = usernameField.value.length > 1 && user.username !== usernameField.value;
+  const isUsernameRequired = userSettings.attributes.username.required;
+
+  const canSubmit =
+    (isUsernameRequired ? usernameField.value.length > 1 : true) && user.username !== usernameField.value;
 
   const updatePassword = async () => {
     try {