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
clerk · Aug 11, 2023 · ac5a700 · ac5a700
1 parent 86b49c1
commit ac5a700
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/red-deers-happen.md 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.
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UsernamePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/UsernamePage.tsx
@@ -1,12 +1,13 @@
 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';
 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 {