diff --git a/packages/nc-gui/components/project/ShareBaseDlg.vue b/packages/nc-gui/components/project/ShareBaseDlg.vue
index e44d77678d..7ab942402a 100644
--- a/packages/nc-gui/components/project/ShareBaseDlg.vue
+++ b/packages/nc-gui/components/project/ShareBaseDlg.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { RoleLabels } from 'nocodb-sdk'
 import { OrderedProjectRoles, ProjectRoles } from 'nocodb-sdk'
 import type { User } from '#imports'
 const props = defineProps<{
@@ -211,6 +212,8 @@ const inviteProjectCollaborator = async () => {
     singleEmailValue.value = ''
   }
 }
+
+const onRoleChange = (role: keyof typeof RoleLabels) => (inviteData.roles = role as ProjectRoles)
 </script>
 
 <template>
@@ -269,7 +272,7 @@ const inviteProjectCollaborator = async () => {
             class="nc-invite-role-selector"
             :role="inviteData.roles"
             :roles="allowedRoles"
-            :on-role-change="(role) => (inviteData.roles = role as ProjectRoles)"
+            :on-role-change="onRoleChange"
             :description="false"
           />
         </div>
diff --git a/packages/nc-gui/components/workspace/CollaboratorsList.vue b/packages/nc-gui/components/workspace/CollaboratorsList.vue
index 32292bdd62..cdd342a7b9 100644
--- a/packages/nc-gui/components/workspace/CollaboratorsList.vue
+++ b/packages/nc-gui/components/workspace/CollaboratorsList.vue
@@ -118,7 +118,7 @@ onMounted(async () => {
                     :roles="accessibleRoles"
                     :description="false"
                     class="cursor-pointer"
-                    :on-role-change="(role) => updateCollaborator(collab, role as WorkspaceUserRoles)"
+                    :on-role-change="(role) => updateCollaborator(collab, role)"
                   />
                 </div>
               </template>
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 6b8ab2710d..48b2fbe87a 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { onKeyStroke } from '@vueuse/core'
+import type { RoleLabels } from 'nocodb-sdk'
 import { OrderedWorkspaceRoles, WorkspaceUserRoles } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg, useWorkspace } from '#imports'
 import { validateEmail } from '~/utils/validation'
@@ -192,6 +193,8 @@ const onPaste = (e: ClipboardEvent) => {
   })
   inviteData.email = ''
 }
+
+const onRoleChange = (role: keyof typeof RoleLabels) => (inviteData.roles = role as WorkspaceUserRoles)
 </script>
 
 <template>
@@ -242,7 +245,7 @@ const onPaste = (e: ClipboardEvent) => {
         class="px-1 min-w-[152px] nc-invite-role-selector"
         :role="inviteData.roles"
         :roles="allowedRoles"
-        :on-role-change="(role) => (inviteData.roles = role as WorkspaceUserRoles)"
+        :on-role-change="onRoleChange"
         :description="true"
       />