diff --git a/public/app/core/components/RolePicker/RolePickerMenu.tsx b/public/app/core/components/RolePicker/RolePickerMenu.tsx
index adda62484dd5..54733ec4a299 100644
--- a/public/app/core/components/RolePicker/RolePickerMenu.tsx
+++ b/public/app/core/components/RolePicker/RolePickerMenu.tsx
@@ -219,7 +219,15 @@ export const RolePickerMenu = ({
       )}
     >
       <div className={customStyles.menu} aria-label="Role picker menu">
-        <CustomScrollbar autoHide={false} autoHeightMax={`${MENU_MAX_HEIGHT}px`} hideHorizontalTrack hideVerticalTrack>
+        <CustomScrollbar
+          autoHide={false}
+          autoHeightMax={`${MENU_MAX_HEIGHT}px`}
+          hideHorizontalTrack
+          hideVerticalTrack
+          // NOTE: this is a way to force hiding of the scrollbar
+          // the scrollbar makes the mouseEvents drop
+          className={cx(customStyles.hideScrollBar)}
+        >
           {showBasicRole && (
             <div className={customStyles.menuSection}>
               <BuiltinRoleSelector
diff --git a/public/app/core/components/RolePicker/styles.ts b/public/app/core/components/RolePicker/styles.ts
index 4dc1258a5a95..4caed7800e0d 100644
--- a/public/app/core/components/RolePicker/styles.ts
+++ b/public/app/core/components/RolePicker/styles.ts
@@ -6,6 +6,16 @@ import { ROLE_PICKER_SUBMENU_MIN_WIDTH } from './constants';
 
 export const getStyles = (theme: GrafanaTheme2) => {
   return {
+    hideScrollBar: css`
+      .scrollbar-view {
+        /* Hide scrollbar for Chrome, Safari, and Opera */
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        /* Hide scrollbar for Firefox */
+        scrollbar-width: none;
+      }
+    `,
     menuWrapper: css`
       display: flex;
       max-height: 650px;