Fixes initial value re-render when options get fetched

Author: LauraBeatris

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

@@ -42,9 +42,7 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
     label: localizationKeys('formFieldLabel__emailAddresses'),
   });
 
-  const defaultRole = useDefaultRole();
-
-  const roleField = useFormControl('role', defaultRole ?? '', {
+  const roleField = useFormControl('role', '', {
     label: localizationKeys('formFieldLabel__role'),
   });
 
@@ -190,6 +188,8 @@ const AsyncRoleSelect = (field: ReturnType<typeof useFormControl<'role'>>) => {
 
   const { t } = useLocalizations();
 
+  const defaultRole = useDefaultRole();
+
   return (
     <Form.ControlRow elementId={field.id}>
       <Flex
@@ -198,6 +198,7 @@ const AsyncRoleSelect = (field: ReturnType<typeof useFormControl<'role'>>) => {
       >
         <RoleSelect
           {...field.props}
+          value={field.props.value || (defaultRole ?? '')}
           roles={options}
           isDisabled={isLoading}
           onChange={value => field.setValue(value)}

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

@@ -1,6 +1,7 @@
 import type { OrganizationInvitationResource } from '@clerk/types';
 import { describe } from '@jest/globals';
 import { waitFor } from '@testing-library/dom';
+import React from 'react';
 
 import { ClerkAPIResponseError } from '../../../../core/resources';
 import { render } from '../../../../testUtils';
@@ -91,10 +92,9 @@ describe('InviteMembersPage', () => {
       await userEvent.click(getByRole('button', { name: /admin/i }));
     });
 
-    it('initializes with the only available role', async () => {
+    it("initializes if there's only one role available", async () => {
       const { wrapper, fixtures } = await createFixtures(f => {
         f.withOrganizations();
-        f.withOrganizationDomains(undefined, undefined);
         f.withUser({
           email_addresses: ['test@clerk.com'],
           organization_memberships: [{ name: 'Org1', role: 'admin' }],
@@ -126,11 +126,59 @@ describe('InviteMembersPage', () => {
         { wrapper },
       );
       await userEvent.type(getByTestId('tag-input'), 'test+1@clerk.com,');
-      await userEvent.click(getByRole('button', { name: /member/i }));
+      await waitFor(() => expect(getByRole('button', { name: /member/i })).toBeInTheDocument());
+    });
+
+    it("does not initialize if there's neither a default role nor a unique role", async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          organization_memberships: [{ name: 'Org1', role: 'admin' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getRoles.mockResolvedValue({
+        total_count: 1,
+        data: [
+          {
+            pathRoot: '',
+            reload: jest.fn(),
+            id: 'member',
+            key: 'member',
+            name: 'member',
+            description: '',
+            permissions: [],
+            createdAt: new Date(),
+            updatedAt: new Date(),
+          },
+          {
+            pathRoot: '',
+            reload: jest.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'), 'test+1@clerk.com,');
+      await waitFor(() => expect(getByRole('button', { name: /select role/i })).toBeInTheDocument());
     });
   });
 
-  describe('Submitting', () => {
+  describe('when submitting', () => {
     it('keeps the Send button disabled until a role is selected and one or more email has been entered', async () => {
       const { wrapper, fixtures } = await createFixtures(f => {
         f.withOrganizations();
@@ -154,6 +202,17 @@ describe('InviteMembersPage', () => {
             createdAt: new Date(),
             updatedAt: new Date(),
           },
+          {
+            pathRoot: '',
+            reload: jest.fn(),
+            id: 'admin',
+            key: 'admin',
+            name: 'Admin',
+            description: '',
+            permissions: [],
+            createdAt: new Date(),
+            updatedAt: new Date(),
+          },
         ],
       });
 
@@ -197,6 +256,17 @@ describe('InviteMembersPage', () => {
             createdAt: new Date(),
             updatedAt: new Date(),
           },
+          {
+            pathRoot: '',
+            reload: jest.fn(),
+            id: 'admin',
+            key: 'admin',
+            name: 'Admin',
+            description: '',
+            permissions: [],
+            createdAt: new Date(),
+            updatedAt: new Date(),
+          },
         ],
       });
 
@@ -243,6 +313,17 @@ describe('InviteMembersPage', () => {
             createdAt: new Date(),
             updatedAt: new Date(),
           },
+          {
+            pathRoot: '',
+            reload: jest.fn(),
+            id: 'admin',
+            key: 'admin',
+            name: 'Admin',
+            description: '',
+            permissions: [],
+            createdAt: new Date(),
+            updatedAt: new Date(),
+          },
         ],
       });
 
@@ -348,6 +429,17 @@ describe('InviteMembersPage', () => {
             createdAt: new Date(),
             updatedAt: new Date(),
           },
+          {
+            pathRoot: '',
+            reload: jest.fn(),
+            id: 'admin',
+            key: 'admin',
+            name: 'Admin',
+            description: '',
+            permissions: [],
+            createdAt: new Date(),
+            updatedAt: new Date(),
+          },
         ],
       });
 
@@ -407,6 +499,17 @@ describe('InviteMembersPage', () => {
             createdAt: new Date(),
             updatedAt: new Date(),
           },
+          {
+            pathRoot: '',
+            reload: jest.fn(),
+            id: 'admin',
+            key: 'admin',
+            name: 'Admin',
+            description: '',
+            permissions: [],
+            createdAt: new Date(),
+            updatedAt: new Date(),
+          },
         ],
       });
 
@@ -462,6 +565,17 @@ describe('InviteMembersPage', () => {
             createdAt: new Date(),
             updatedAt: new Date(),
           },
+          {
+            pathRoot: '',
+            reload: jest.fn(),
+            id: 'admin',
+            key: 'admin',
+            name: 'Admin',
+            description: '',
+            permissions: [],
+            createdAt: new Date(),
+            updatedAt: new Date(),
+          },
         ],
       });