Fix invite member modal dropdown checkbox styling

app/assets/javascripts/invite_members/components/invite_members_modal.vue

@@ -49,7 +49,7 @@ export default {
       required: true,
     },
     defaultAccessLevel: {
-      type: String,
+      type: Number,
       required: true,
     },
     helpLink: {
@@ -280,6 +280,7 @@ export default {
             <gl-dropdown-item
               :key="key"
               active-class="is-active"
+              is-check-item
               :is-checked="key === selectedAccessLevel"
               @click="changeSelectedItem(key)"
             >

app/assets/javascripts/invite_members/init_invite_members_modal.js

@@ -20,6 +20,7 @@ export default function initInviteMembersModal() {
           ...el.dataset,
           isProject: parseBoolean(el.dataset.isProject),
           accessLevels: JSON.parse(el.dataset.accessLevels),
+          defaultAccessLevel: parseInt(el.dataset.defaultAccessLevel, 10),
         },
       }),
   });

changelogs/unreleased/322082-fix-invite-member-modal-dropdown-styling.yml

+---
+title: Fix invite member modal dropdown checkbox styling
+merge_request: 55832
+author: Kev @KevSlashNull
+type: fixed

spec/frontend/invite_members/components/invite_members_modal_spec.js

@@ -10,7 +10,7 @@ const name = 'test name';
 const isProject = false;
 const inviteeType = 'members';
 const accessLevels = { Guest: 10, Reporter: 20, Developer: 30, Maintainer: 40, Owner: 50 };
-const defaultAccessLevel = '10';
+const defaultAccessLevel = 10;
 const helpLink = 'https://example.com';
 
 const user1 = { id: 1, name: 'Name One', username: 'one_1', avatar_url: '' };
@@ -167,7 +167,7 @@ describe('InviteMembersModal', () => {
     describe('when inviting an existing user to group by user ID', () => {
       const postData = {
         user_id: '1',
-        access_level: '10',
+        access_level: defaultAccessLevel,
         expires_at: undefined,
         format: 'json',
       };
@@ -238,7 +238,7 @@ describe('InviteMembersModal', () => {
 
     describe('when inviting a new user by email address', () => {
       const postData = {
-        access_level: '10',
+        access_level: defaultAccessLevel,
         expires_at: undefined,
         email: 'email@example.com',
         format: 'json',
@@ -287,7 +287,7 @@ describe('InviteMembersModal', () => {
 
     describe('when inviting members and non-members in same click', () => {
       const postData = {
-        access_level: '10',
+        access_level: defaultAccessLevel,
         expires_at: undefined,
         format: 'json',
       };
@@ -348,7 +348,7 @@ describe('InviteMembersModal', () => {
       describe('when sharing the group is successful', () => {
         const groupPostData = {
           group_id: sharedGroup.id,
-          group_access: '10',
+          group_access: defaultAccessLevel,
           expires_at: undefined,
           format: 'json',
         };