diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.test.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.test.tsx
index e39b7504360..56807ba60b3 100644
--- a/packages/grafana-ui/src/components/Cascader/Cascader.test.tsx
+++ b/packages/grafana-ui/src/components/Cascader/Cascader.test.tsx
@@ -1,7 +1,9 @@
 import { act, render, screen } from '@testing-library/react';
-import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
+import { Field } from '../Forms/Field';
+
 import { Cascader, CascaderOption, CascaderProps } from './Cascader';
 
 const options = [
@@ -118,9 +120,8 @@ describe('Cascader', () => {
     expect(screen.queryByDisplayValue('First/Second')).not.toBeInTheDocument();
 
     await userEvent.click(screen.getByPlaceholderText(placeholder));
-    // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
-    await userEvent.click(screen.getByText('First'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
-    await userEvent.click(screen.getByText('Second'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
+    await userEvent.click(screen.getByText('First'));
+    await userEvent.click(screen.getByText('Second'));
 
     expect(screen.getByDisplayValue('First / Second')).toBeInTheDocument();
   });
@@ -141,9 +142,8 @@ describe('Cascader', () => {
     expect(screen.queryByDisplayValue('First/Second')).not.toBeInTheDocument();
 
     await userEvent.click(screen.getByPlaceholderText(placeholder));
-    // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
-    await userEvent.click(screen.getByText('First'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
-    await userEvent.click(screen.getByText('Second'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
+    await userEvent.click(screen.getByText('First'));
+    await userEvent.click(screen.getByText('Second'));
 
     expect(screen.getByDisplayValue(`First${separator}Second`)).toBeInTheDocument();
   });
@@ -154,9 +154,8 @@ describe('Cascader', () => {
     );
 
     await userEvent.click(screen.getByPlaceholderText(placeholder));
-    // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
-    await userEvent.click(screen.getByText('First'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
-    await userEvent.click(screen.getByText('Second'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
+    await userEvent.click(screen.getByText('First'));
+    await userEvent.click(screen.getByText('Second'));
 
     expect(screen.getByDisplayValue('Second')).toBeInTheDocument();
   });
@@ -165,10 +164,19 @@ describe('Cascader', () => {
     render(<Cascader placeholder={placeholder} options={options} onSelect={jest.fn()} />);
 
     await userEvent.click(screen.getByPlaceholderText(placeholder));
-    // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
-    await userEvent.click(screen.getByText('First'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
-    await userEvent.click(screen.getByText('Second'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
+    await userEvent.click(screen.getByText('First'));
+    await userEvent.click(screen.getByText('Second'));
 
     expect(screen.getByDisplayValue('Second')).toBeInTheDocument();
   });
+
+  it('should be properly associated with the Field label', () => {
+    render(
+      <Field label={'Cascader label'}>
+        <Cascader options={options} onSelect={jest.fn()} id={'cascader'} />
+      </Field>
+    );
+
+    expect(screen.getByRole('textbox', { name: 'Cascader label' })).toBeInTheDocument();
+  });
 });
diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
index 108d285366f..c4a46551db6 100644
--- a/packages/grafana-ui/src/components/Cascader/Cascader.tsx
+++ b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
@@ -38,6 +38,8 @@ export interface CascaderProps {
       cascader is hidden after selection. */
   hideActiveLevelLabel?: boolean;
   disabled?: boolean;
+  /** ID for the underlying Select/Cascader component */
+  id?: string;
 }
 
 interface CascaderState {
@@ -215,7 +217,8 @@ export class Cascader extends PureComponent<CascaderProps, CascaderState> {
   };
 
   render() {
-    const { allowCustomValue, formatCreateLabel, placeholder, width, changeOnSelect, options, disabled } = this.props;
+    const { allowCustomValue, formatCreateLabel, placeholder, width, changeOnSelect, options, disabled, id } =
+      this.props;
     const { focusCascade, isSearching, rcValue, activeLabel, inputValue } = this.state;
 
     const searchableOptions = this.getSearchableOptions(options);
@@ -236,6 +239,7 @@ export class Cascader extends PureComponent<CascaderProps, CascaderState> {
             onInputChange={this.onSelectInputChange}
             disabled={disabled}
             inputValue={inputValue}
+            inputId={id}
           />
         ) : (
           <RCCascader
@@ -265,6 +269,7 @@ export class Cascader extends PureComponent<CascaderProps, CascaderState> {
                   )
                 }
                 disabled={disabled}
+                id={id}
               />
             </div>
           </RCCascader>