diff --git a/public/app/core/components/RolePicker/TeamRolePicker.tsx b/public/app/core/components/RolePicker/TeamRolePicker.tsx
index 78e3b0f2c82..d7b35e4ee51 100644
--- a/public/app/core/components/RolePicker/TeamRolePicker.tsx
+++ b/public/app/core/components/RolePicker/TeamRolePicker.tsx
@@ -44,23 +44,25 @@ export const TeamRolePicker = ({
   width,
   isLoading,
 }: Props) => {
-  const [{ loading, value: appliedRoles = roles || [] }, getTeamRoles] = useAsyncFn(async () => {
-    try {
-      if (roles) {
-        return roles;
+  const [{ loading, value: appliedRoles = roles || [] }, getTeamRoles] = useAsyncFn(
+    async (force = false) => {
+      try {
+        if (!force && roles) {
+          return roles;
+        }
+        if (!force && apply && Boolean(pendingRoles?.length)) {
+          return pendingRoles;
+        }
+        if (contextSrv.hasPermission(AccessControlAction.ActionTeamsRolesList) && teamId > 0) {
+          return await fetchTeamRoles(teamId);
+        }
+      } catch (e) {
+        console.error('Error fetching roles', e);
       }
-      if (apply && Boolean(pendingRoles?.length)) {
-        return pendingRoles;
-      }
-
-      if (contextSrv.hasPermission(AccessControlAction.ActionTeamsRolesList) && teamId > 0) {
-        return await fetchTeamRoles(teamId);
-      }
-    } catch (e) {
-      console.error('Error loading options', e);
-    }
-    return [];
-  }, [teamId, pendingRoles, roles]);
+      return [];
+    },
+    [teamId, pendingRoles, roles]
+  );
 
   useEffect(() => {
     getTeamRoles();
@@ -69,7 +71,7 @@ export const TeamRolePicker = ({
   const onRolesChange = async (roles: Role[]) => {
     if (!apply) {
       await updateTeamRoles(roles, teamId);
-      await getTeamRoles();
+      await getTeamRoles(true); // Force fetch from backend after update
     } else if (onApplyRoles) {
       onApplyRoles(roles);
     }
diff --git a/public/app/core/components/RolePicker/UserRolePicker.tsx b/public/app/core/components/RolePicker/UserRolePicker.tsx
index a4232f4b61a..1855e3e53ba 100644
--- a/public/app/core/components/RolePicker/UserRolePicker.tsx
+++ b/public/app/core/components/RolePicker/UserRolePicker.tsx
@@ -54,24 +54,25 @@ export const UserRolePicker = ({
   width,
   isLoading,
 }: Props) => {
-  const [{ loading, value: appliedRoles = roles || [] }, getUserRoles] = useAsyncFn(async () => {
-    try {
-      if (roles) {
-        return roles;
+  const [{ loading, value: appliedRoles = roles || [] }, getUserRoles] = useAsyncFn(
+    async (force = false) => {
+      try {
+        if (!force && roles) {
+          return roles;
+        }
+        if (!force && apply && Boolean(pendingRoles?.length)) {
+          return pendingRoles;
+        }
+        if (contextSrv.hasPermission(AccessControlAction.ActionUserRolesList) && userId > 0) {
+          return await fetchUserRoles(userId, orgId);
+        }
+      } catch (e) {
+        console.error('Error fetching user roles');
       }
-      if (apply && Boolean(pendingRoles?.length)) {
-        return pendingRoles;
-      }
-
-      if (contextSrv.hasPermission(AccessControlAction.ActionUserRolesList) && userId > 0) {
-        return await fetchUserRoles(userId, orgId);
-      }
-    } catch (e) {
-      // TODO handle error
-      console.error('Error loading options');
-    }
-    return [];
-  }, [orgId, userId, pendingRoles, roles]);
+      return [];
+    },
+    [orgId, userId, pendingRoles, roles]
+  );
 
   useEffect(() => {
     // only load roles when there is an Org selected
@@ -83,7 +84,7 @@ export const UserRolePicker = ({
   const onRolesChange = async (roles: Role[]) => {
     if (!apply) {
       await updateUserRoles(roles, userId, orgId);
-      await getUserRoles();
+      await getUserRoles(true); // Force fetch from backend after update
     } else if (onApplyRoles) {
       onApplyRoles(roles, userId, orgId);
     }