diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/NestedResourceTable.test.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/NestedResourceTable.test.tsx
index ba1a53c7e89..0c9d730719f 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/NestedResourceTable.test.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/NestedResourceTable.test.tsx
@@ -1,14 +1,24 @@
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { createMockResourcePickerRows } from '../../__mocks__/resourcePickerRows';
 
+import { createMockResourcePickerRows } from '../../__mocks__/resourcePickerRows';
 import NestedResourceTable from './NestedResourceTable';
 import { findRow } from './utils';
 
 describe('AzureMonitor NestedResourceTable', () => {
   const noop: any = () => {};
 
+  const getElementById = document.getElementById;
+  beforeEach(() => {
+    document.getElementById = jest.fn().mockReturnValue({
+      scrollIntoView: jest.fn(),
+    });
+  });
+  afterEach(() => {
+    document.getElementById = getElementById;
+  });
+
   it('renders subscriptions', () => {
     const rows = createMockResourcePickerRows();
 
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/NestedRows.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/NestedRows.tsx
index 5542bdfe3bd..480684e5e83 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/NestedRows.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/NestedRows.tsx
@@ -1,9 +1,10 @@
 import { cx } from '@emotion/css';
-import { Checkbox, Icon, IconButton, LoadingPlaceholder, useStyles2, useTheme2, FadeTransition } from '@grafana/ui';
+import { Checkbox, FadeTransition, Icon, IconButton, LoadingPlaceholder, useStyles2, useTheme2 } from '@grafana/ui';
 import React, { useCallback, useEffect, useState } from 'react';
+
 import { Space } from '../Space';
 import getStyles from './styles';
-import { ResourceRowType, ResourceRow, ResourceRowGroup } from './types';
+import { ResourceRow, ResourceRowGroup, ResourceRowType } from './types';
 import { findRow } from './utils';
 
 interface NestedRowsProps {
@@ -182,6 +183,17 @@ const NestedEntry: React.FC<NestedEntryProps> = ({
 
   const checkboxId = `checkbox_${entry.id}`;
 
+  // Scroll to the selected element if it's not in the view
+  // Only do it once, when the component is mounted
+  useEffect(() => {
+    if (isSelected) {
+      document.getElementById(checkboxId)?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      });
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   return (
     <div className={styles.nestedEntry} style={{ marginLeft: level * (3 * theme.spacing.gridSize) }}>
       {/* When groups are selectable, I *think* we will want to show a 2-wide space instead