Enable to select remaining options

Author: LauraBeatris

.changeset/dry-rings-report.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix role select being disabled on `OrganizationProfile` invite members page when default role is not in roles list

packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx

@@ -48,19 +48,10 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
     label: localizationKeys('formFieldLabel__emailAddresses'),
   });
 
-  const defaultRole = useDefaultRole();
   const roleField = useFormControl('role', '', {
     label: localizationKeys('formFieldLabel__role'),
   });
 
-  useEffect(() => {
-    if (roleField.value || !defaultRole) {
-      return;
-    }
-
-    roleField.setValue(defaultRole);
-  }, [defaultRole, roleField]);
-
   if (!organization) {
     return null;
   }
@@ -200,8 +191,21 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
 
 const AsyncRoleSelect = (field: ReturnType<typeof useFormControl<'role'>>) => {
   const { options, isLoading, hasRoleSetMigration } = useFetchRoles();
-
   const { t } = useLocalizations();
+  const defaultRole = useDefaultRole();
+
+  useEffect(() => {
+    if (field.value || !defaultRole) {
+      return;
+    }
+
+    const defaultRoleExists = options?.some(option => option.value === defaultRole);
+    if (!defaultRoleExists) {
+      return;
+    }
+
+    field.setValue(defaultRole);
+  }, [defaultRole, options, field]);
 
   return (
     <Form.ControlRow elementId={field.id}>

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx

@@ -245,6 +245,59 @@ describe('InviteMembersPage', () => {
       await waitFor(() => expect(getByRole('button', { name: /select role/i })).toBeInTheDocument());
     });
 
+    it('enables selecting other options if default role is not available', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withOrganizationDomains(undefined, 'mydefaultrole');
+        f.withUser({
+          email_addresses: ['[email protected]'],
+          organization_memberships: [{ name: 'Org1', role: 'admin' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getInvitations.mockRejectedValue(null);
+      fixtures.clerk.organization?.getRoles.mockResolvedValue({
+        total_count: 1,
+        data: [
+          {
+            pathRoot: '',
+            reload: vi.fn(),
+            id: 'member',
+            key: 'member',
+            name: 'member',
+            description: '',
+            permissions: [],
+            createdAt: new Date(),
+            updatedAt: new Date(),
+          },
+          {
+            pathRoot: '',
+            reload: vi.fn(),
+            id: 'admin',
+            key: 'admin',
+            name: 'admin',
+            description: '',
+            permissions: [],
+            createdAt: new Date(),
+            updatedAt: new Date(),
+          },
+        ],
+      });
+
+      fixtures.clerk.organization?.inviteMembers.mockResolvedValueOnce([{}] as OrganizationInvitationResource[]);
+      const { getByRole, userEvent, getByTestId } = render(
+        <Action.Root>
+          <InviteMembersScreen />
+        </Action.Root>,
+        { wrapper },
+      );
+      await userEvent.type(getByTestId('tag-input'), '[email protected],');
+      await waitFor(() => expect(getByRole('button', { name: /select role/i })).toBeInTheDocument());
+      await userEvent.click(getByRole('button', { name: /select role/i }));
+      await userEvent.click(getByRole('button', { name: /admin/i }));
+      await waitFor(() => expect(getByRole('button', { name: 'Send invitations' })).not.toBeDisabled());
+    });
+
     it('enables send button with default role once email address has been entered', async () => {
       const defaultRole = 'mydefaultrole';