diff --git a/docs/sources/whatsnew/whats-new-in-v8-1.md b/docs/sources/whatsnew/whats-new-in-v8-1.md
index de03cccfdfb..7a9aa8b28c9 100644
--- a/docs/sources/whatsnew/whats-new-in-v8-1.md
+++ b/docs/sources/whatsnew/whats-new-in-v8-1.md
@@ -116,6 +116,22 @@ We’ve made some changes to the plugins UI to help make it easier to discover a
 
 New panel summaries and preview on the top level [Visualizations]({{< relref "../panels/visualizations/_index.md" >}}) page to help users pick or learn about specific visualizations more easily.
 
+### Upcoming changes to the Select component
+
+The `@grafana/ui` exposes a `Select` component, and its variants `MultiSelect`, `AsyncSelect`, and `AsyncMultiSelect`. We have made some internal changes to these components to make the behavior and positioning more consistent in all scenarios.
+
+To test the changes, you can use the `menuShouldPortal` property:
+```jsx
+<Select
+  menuShouldPortal
+  {...otherProps}
+/>
+```
+
+Tests are most likely to be affected. There are some tips for fixing these in the original pull request at [https://github.com/grafana/grafana/pull/36398](https://github.com/grafana/grafana/pull/36398).
+
+We’d love as much feedback as possible about this change, because we are considering making this the default behavior in a future release of Grafana.
+
 ## Enterprise features
 
 These features are included in the Grafana Enterprise edition.
diff --git a/packages/grafana-e2e/src/flows/addDashboard.ts b/packages/grafana-e2e/src/flows/addDashboard.ts
index fc18f76c67d..a0be67e10cb 100644
--- a/packages/grafana-e2e/src/flows/addDashboard.ts
+++ b/packages/grafana-e2e/src/flows/addDashboard.ts
@@ -157,8 +157,9 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar
     e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect()
       .should('be.visible')
       .within(() => {
-        e2e.components.Select.singleValue().should('have.text', 'Query').click().type(`${type}{enter}`);
+        e2e.components.Select.singleValue().should('have.text', 'Query').click();
       });
+    e2e.components.Select.option().should('be.visible').contains(type).click();
   }
 
   if (label) {
diff --git a/packages/grafana-runtime/src/components/DataSourcePicker.tsx b/packages/grafana-runtime/src/components/DataSourcePicker.tsx
index 202e683a335..e32cbdf3150 100644
--- a/packages/grafana-runtime/src/components/DataSourcePicker.tsx
+++ b/packages/grafana-runtime/src/components/DataSourcePicker.tsx
@@ -144,6 +144,7 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
     return (
       <div aria-label={selectors.components.DataSourcePicker.container}>
         <Select
+          menuShouldPortal
           className={styles.select}
           isMulti={false}
           isClearable={false}
diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
index 705f870c7b2..3ef8ca4880e 100644
--- a/packages/grafana-ui/src/components/Cascader/Cascader.tsx
+++ b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
@@ -193,6 +193,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
       <div>
         {isSearching ? (
           <Select
+            menuShouldPortal
             allowCustomValue={allowCustomValue}
             placeholder={placeholder}
             autoFocus={!focusCascade}
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
index 9efd5548e8b..e5a89c9bb60 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
@@ -100,6 +100,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
 
   const accessSelect = (
     <Select
+      menuShouldPortal
       width={20}
       options={ACCESS_OPTIONS}
       value={ACCESS_OPTIONS.filter((o) => o.value === dataSourceConfig.access)[0] || DEFAULT_ACCESS_OPTION}
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx
index fb46150f984..ee848c69f62 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx
@@ -43,6 +43,7 @@ export const TimeZonePicker: React.FC<Props> = (props) => {
 
   return (
     <Select
+      menuShouldPortal
       value={selected}
       placeholder="Type to search (country, city, abbreviation)"
       autoFocus={autoFocus}
diff --git a/packages/grafana-ui/src/components/Forms/Field.test.tsx b/packages/grafana-ui/src/components/Forms/Field.test.tsx
index 970985fa95c..c4e44205bc5 100644
--- a/packages/grafana-ui/src/components/Forms/Field.test.tsx
+++ b/packages/grafana-ui/src/components/Forms/Field.test.tsx
@@ -28,7 +28,7 @@ describe('Field', () => {
   it('renders with the inputId of its children', () => {
     render(
       <Field label="My other label">
-        <Select inputId="my-select-input" onChange={() => {}} />
+        <Select menuShouldPortal inputId="my-select-input" onChange={() => {}} />
       </Field>
     );
 
diff --git a/packages/grafana-ui/src/components/Forms/Form.story.tsx b/packages/grafana-ui/src/components/Forms/Form.story.tsx
index f109d0c2b42..e1ae71daa9b 100644
--- a/packages/grafana-ui/src/components/Forms/Form.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Form.story.tsx
@@ -111,7 +111,7 @@ const renderForm = (defaultValues?: FormDTO) => (
               rules={{
                 required: true,
               }}
-              render={({ field }) => <Select {...field} options={selectOptions} />}
+              render={({ field }) => <Select menuShouldPortal {...field} options={selectOptions} />}
             />
           </Field>
 
diff --git a/packages/grafana-ui/src/components/Forms/InlineField.story.tsx b/packages/grafana-ui/src/components/Forms/InlineField.story.tsx
index a4f97954757..b9357bb6215 100644
--- a/packages/grafana-ui/src/components/Forms/InlineField.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineField.story.tsx
@@ -43,6 +43,7 @@ export const withSelect = () => {
   return (
     <InlineField label="Select option">
       <Select
+        menuShouldPortal
         width={16}
         onChange={action('item selected')}
         options={[
diff --git a/packages/grafana-ui/src/components/Forms/InlineField.test.tsx b/packages/grafana-ui/src/components/Forms/InlineField.test.tsx
index 9945649883f..8ad2241d9cc 100644
--- a/packages/grafana-ui/src/components/Forms/InlineField.test.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineField.test.tsx
@@ -28,7 +28,7 @@ describe('InlineField', () => {
   it('renders with the inputId of its children', () => {
     render(
       <InlineField label="My other label">
-        <Select inputId="my-select-input" onChange={() => {}} />
+        <Select menuShouldPortal inputId="my-select-input" onChange={() => {}} />
       </InlineField>
     );
 
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx
index 8b2fbd72eec..2f9a66737d0 100644
--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx
@@ -69,6 +69,7 @@ export const Basic: Story = (args) => {
       {(value, updateValue) => {
         return (
           <Select
+            menuShouldPortal
             {...args}
             onChange={(value: SelectableValue<string>) => {
               action('onChanged fired')(value);
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldNameMatcherEditor.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldNameMatcherEditor.tsx
index bcfe77446a7..e3986bddee9 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldNameMatcherEditor.tsx
+++ b/packages/grafana-ui/src/components/MatchersUI/FieldNameMatcherEditor.tsx
@@ -20,7 +20,7 @@ export const FieldNameMatcherEditor = memo<MatcherUIProps<string>>((props) => {
   );
 
   const selectedOption = selectOptions.find((v) => v.value === options);
-  return <Select value={selectedOption} options={selectOptions} onChange={onChange} />;
+  return <Select menuShouldPortal value={selectedOption} options={selectOptions} onChange={onChange} />;
 });
 FieldNameMatcherEditor.displayName = 'FieldNameMatcherEditor';
 
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldNamePicker.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldNamePicker.tsx
index 7511b25c59e..6f6abc6b9ae 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldNamePicker.tsx
+++ b/packages/grafana-ui/src/components/MatchersUI/FieldNamePicker.tsx
@@ -28,6 +28,7 @@ export const FieldNamePicker: React.FC<StandardEditorProps<string, FieldNamePick
   return (
     <>
       <Select
+        menuShouldPortal
         value={selectedOption}
         options={selectOptions}
         onChange={onSelectChange}
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldNamesMatcherEditor.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldNamesMatcherEditor.tsx
index 69fc04506c4..3d52275d9eb 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldNamesMatcherEditor.tsx
+++ b/packages/grafana-ui/src/components/MatchersUI/FieldNamesMatcherEditor.tsx
@@ -36,7 +36,7 @@ export const FieldNamesMatcherEditor = memo<MatcherUIProps<ByNamesMatcherOptions
     return <Input value={displayNames} readOnly={true} disabled={true} prefix={prefix} />;
   }
 
-  return <MultiSelect value={options.names} options={selectOptions} onChange={onChange} />;
+  return <MultiSelect menuShouldPortal value={options.names} options={selectOptions} onChange={onChange} />;
 });
 FieldNamesMatcherEditor.displayName = 'FieldNameMatcherEditor';
 
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx
index af422a6db07..fef563276d1 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx
+++ b/packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx
@@ -16,7 +16,7 @@ export const FieldTypeMatcherEditor = memo<MatcherUIProps<string>>((props) => {
   );
 
   const selectedOption = selectOptions.find((v) => v.value === options);
-  return <Select value={selectedOption} options={selectOptions} onChange={onChange} />;
+  return <Select menuShouldPortal value={selectedOption} options={selectOptions} onChange={onChange} />;
 });
 FieldTypeMatcherEditor.displayName = 'FieldTypeMatcherEditor';
 
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx
index 1f6a18b57f5..57c78198b80 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx
+++ b/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx
@@ -23,7 +23,7 @@ export const FieldsByFrameRefIdMatcher = memo<MatcherUIProps<string>>((props) =>
   );
 
   const selectedOption = selectOptions.find((v) => v.value === options);
-  return <Select value={selectedOption} options={selectOptions} onChange={onChange} />;
+  return <Select menuShouldPortal value={selectedOption} options={selectOptions} onChange={onChange} />;
 });
 
 FieldsByFrameRefIdMatcher.displayName = 'FieldsByFrameRefIdMatcher';
diff --git a/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx b/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx
index 4c51b77eac2..13bbbb40fee 100644
--- a/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx
+++ b/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx
@@ -74,7 +74,14 @@ export const FieldColorEditor: React.FC<FieldConfigEditorProps<FieldColor | unde
   if (mode === FieldColorModeId.Fixed) {
     return (
       <div className={styles.group}>
-        <Select minMenuHeight={200} options={options} value={mode} onChange={onModeChange} className={styles.select} />
+        <Select
+          menuShouldPortal
+          minMenuHeight={200}
+          options={options}
+          value={mode}
+          onChange={onModeChange}
+          className={styles.select}
+        />
         <ColorValueEditor value={value?.fixedColor} onChange={onColorChange} />
       </div>
     );
@@ -90,7 +97,7 @@ export const FieldColorEditor: React.FC<FieldConfigEditorProps<FieldColor | unde
     return (
       <>
         <div style={{ marginBottom: theme.spacing(2) }}>
-          <Select minMenuHeight={200} options={options} value={mode} onChange={onModeChange} />
+          <Select menuShouldPortal minMenuHeight={200} options={options} value={mode} onChange={onModeChange} />
         </div>
         <Field label="Color series by">
           <RadioButtonGroup value={value?.seriesBy ?? 'last'} options={seriesModes} onChange={onSeriesModeChange} />
@@ -99,7 +106,7 @@ export const FieldColorEditor: React.FC<FieldConfigEditorProps<FieldColor | unde
     );
   }
 
-  return <Select minMenuHeight={200} options={options} value={mode} onChange={onModeChange} />;
+  return <Select menuShouldPortal minMenuHeight={200} options={options} value={mode} onChange={onModeChange} />;
 };
 
 interface ModeProps {
diff --git a/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx b/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
index 5614b0beab1..07d053ca562 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
@@ -44,6 +44,7 @@ export function SegmentSelect<T>({
   return (
     <div {...rest} ref={ref}>
       <Select
+        menuShouldPortal
         width={width}
         noOptionsMessage={noOptionsMessage}
         placeholder={placeholder}
diff --git a/packages/grafana-ui/src/components/Select/Select.story.tsx b/packages/grafana-ui/src/components/Select/Select.story.tsx
index 888d94e68df..23c42b0f65a 100644
--- a/packages/grafana-ui/src/components/Select/Select.story.tsx
+++ b/packages/grafana-ui/src/components/Select/Select.story.tsx
@@ -91,6 +91,7 @@ export const Basic: Story<StoryProps> = (args) => {
   return (
     <>
       <Select
+        menuShouldPortal
         options={generateOptions()}
         value={value}
         onChange={(v) => {
@@ -111,6 +112,7 @@ export const BasicSelectPlainValue: Story<StoryProps> = (args) => {
   return (
     <>
       <Select
+        menuShouldPortal
         options={generateOptions()}
         value={value}
         onChange={(v) => {
@@ -144,6 +146,7 @@ export const SelectWithOptionDescriptions: Story = (args) => {
   return (
     <>
       <Select
+        menuShouldPortal
         options={options}
         value={value}
         onChange={(v) => {
@@ -166,6 +169,7 @@ export const MultiPlainValue: Story = (args) => {
   return (
     <>
       <MultiSelect
+        menuShouldPortal
         options={generateOptions()}
         value={value}
         onChange={(v) => {
@@ -184,6 +188,7 @@ export const MultiSelectWithOptionGroups: Story = (args) => {
   return (
     <>
       <MultiSelect
+        menuShouldPortal
         options={[
           { label: '1', value: '1' },
           { label: '2', value: '2', options: [{ label: '5', value: '5' }] },
@@ -206,6 +211,7 @@ export const MultiSelectBasic: Story = (args) => {
   return (
     <>
       <MultiSelect
+        menuShouldPortal
         options={generateOptions()}
         value={value}
         onChange={(v) => {
@@ -229,6 +235,7 @@ export const MultiSelectAsync: Story = (args) => {
 
   return (
     <AsyncMultiSelect
+      menuShouldPortal
       loadOptions={loadAsyncOptions}
       defaultOptions
       value={value}
@@ -250,6 +257,7 @@ export const BasicSelectAsync: Story = (args) => {
 
   return (
     <AsyncSelect
+      menuShouldPortal
       loadOptions={loadAsyncOptions}
       defaultOptions
       value={value}
@@ -270,6 +278,7 @@ export const AutoMenuPlacement: Story = (args) => {
     <>
       <div style={{ width: '100%', height: '95vh', display: 'flex', alignItems: 'flex-end' }}>
         <Select
+          menuShouldPortal
           options={generateOptions()}
           value={value}
           onChange={(v) => {
@@ -294,6 +303,7 @@ export const CustomValueCreation: Story = (args) => {
   return (
     <>
       <Select
+        menuShouldPortal
         options={[...options, ...customOptions]}
         value={value}
         onChange={(v) => {
diff --git a/packages/grafana-ui/src/components/Select/SelectBase.test.tsx b/packages/grafana-ui/src/components/Select/SelectBase.test.tsx
index 0512480792b..f2768833941 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.test.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.test.tsx
@@ -19,11 +19,11 @@ describe('SelectBase', () => {
   ];
 
   it('renders without error', () => {
-    render(<SelectBase onChange={onChangeHandler} />);
+    render(<SelectBase menuShouldPortal onChange={onChangeHandler} />);
   });
 
   it('renders empty options information', () => {
-    render(<SelectBase onChange={onChangeHandler} />);
+    render(<SelectBase menuShouldPortal onChange={onChangeHandler} />);
     userEvent.click(screen.getByText(/choose/i));
     expect(screen.queryByText(/no options found/i)).toBeVisible();
   });
@@ -32,7 +32,7 @@ describe('SelectBase', () => {
     render(
       <>
         <label htmlFor="my-select">My select</label>
-        <SelectBase onChange={onChangeHandler} options={options} inputId="my-select" />
+        <SelectBase menuShouldPortal onChange={onChangeHandler} options={options} inputId="my-select" />
       </>
     );
 
@@ -47,7 +47,7 @@ describe('SelectBase', () => {
       return (
         <>
           <button onClick={() => setValue(null)}>clear value</button>
-          <SelectBase value={value} onChange={setValue} options={[option]} />
+          <SelectBase menuShouldPortal value={value} onChange={setValue} options={[option]} />
         </>
       );
     };
@@ -61,7 +61,7 @@ describe('SelectBase', () => {
   describe('when openMenuOnFocus prop', () => {
     describe('is provided', () => {
       it('opens on focus', () => {
-        render(<SelectBase onChange={onChangeHandler} openMenuOnFocus />);
+        render(<SelectBase menuShouldPortal onChange={onChangeHandler} openMenuOnFocus />);
         fireEvent.focus(screen.getByRole('textbox'));
         expect(screen.queryByText(/no options found/i)).toBeVisible();
       });
@@ -73,7 +73,7 @@ describe('SelectBase', () => {
         ${'ArrowUp'}
         ${' '}
       `('opens on arrow down/up or space', ({ key }) => {
-        render(<SelectBase onChange={onChangeHandler} />);
+        render(<SelectBase menuShouldPortal onChange={onChangeHandler} />);
         fireEvent.focus(screen.getByRole('textbox'));
         fireEvent.keyDown(screen.getByRole('textbox'), { key });
         expect(screen.queryByText(/no options found/i)).toBeVisible();
@@ -112,6 +112,7 @@ describe('SelectBase', () => {
       it('should only display maxVisibleValues options, and additional number of values should be displayed as indicator', () => {
         render(
           <SelectBase
+            menuShouldPortal
             onChange={onChangeHandler}
             isMulti={true}
             maxVisibleValues={3}
@@ -128,6 +129,7 @@ describe('SelectBase', () => {
         it('should show all selected options when menu is open', () => {
           render(
             <SelectBase
+              menuShouldPortal
               onChange={onChangeHandler}
               isMulti={true}
               maxVisibleValues={3}
@@ -147,6 +149,7 @@ describe('SelectBase', () => {
         it('should not show all selected options when menu is open', () => {
           render(
             <SelectBase
+              menuShouldPortal
               onChange={onChangeHandler}
               isMulti={true}
               maxVisibleValues={3}
@@ -167,6 +170,7 @@ describe('SelectBase', () => {
       it('should always show all selected options', () => {
         render(
           <SelectBase
+            menuShouldPortal
             onChange={onChangeHandler}
             isMulti={true}
             options={excessiveOptions}
@@ -183,7 +187,7 @@ describe('SelectBase', () => {
 
   describe('options', () => {
     it('renders menu with provided options', () => {
-      render(<SelectBase options={options} onChange={onChangeHandler} />);
+      render(<SelectBase menuShouldPortal options={options} onChange={onChangeHandler} />);
       userEvent.click(screen.getByText(/choose/i));
       const menuOptions = screen.getAllByLabelText('Select option');
       expect(menuOptions).toHaveLength(2);
@@ -192,7 +196,7 @@ describe('SelectBase', () => {
     it('call onChange handler when option is selected', async () => {
       const spy = jest.fn();
 
-      render(<SelectBase onChange={spy} options={options} aria-label="My select" />);
+      render(<SelectBase menuShouldPortal onChange={spy} options={options} aria-label="My select" />);
 
       const selectEl = screen.getByLabelText('My select');
       expect(selectEl).toBeInTheDocument();
diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index 39b2c990f22..dc673c1bad4 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -117,8 +117,8 @@ export function SelectBase<T>({
   minMenuHeight,
   maxVisibleValues,
   menuPlacement = 'auto',
-  menuPortalTarget,
   menuPosition,
+  menuShouldPortal = false,
   noOptionsMessage = 'No options found',
   onBlur,
   onChange,
@@ -138,10 +138,8 @@ export function SelectBase<T>({
   width,
   isValidNewOption,
 }: SelectBaseProps<T>) {
-  if (menuPortalTarget !== undefined) {
-    deprecationWarning('SelectBase', 'menuPortalTarget');
-  } else {
-    menuPortalTarget = document.body;
+  if (menuShouldPortal === false) {
+    deprecationWarning('SelectBase', 'menuShouldPortal={false}', 'menuShouldPortal={true}');
   }
   const theme = useTheme2();
   const styles = getSelectStyles(theme);
@@ -206,9 +204,9 @@ export function SelectBase<T>({
     maxVisibleValues,
     menuIsOpen: isOpen,
     menuPlacement,
-    menuPortalTarget,
     menuPosition,
     menuShouldBlockScroll: true,
+    menuPortalTarget: menuShouldPortal ? document.body : undefined,
     menuShouldScrollIntoView: false,
     onBlur,
     onChange: onChangeWithEmpty,
@@ -350,6 +348,7 @@ export function SelectBase<T>({
             bottom,
             position,
             minWidth: '100%',
+            zIndex: theme.zIndex.dropdown,
           }),
           container: () => ({
             position: 'relative',
diff --git a/packages/grafana-ui/src/components/Select/types.ts b/packages/grafana-ui/src/components/Select/types.ts
index a14b1b9ba90..6da83a58e63 100644
--- a/packages/grafana-ui/src/components/Select/types.ts
+++ b/packages/grafana-ui/src/components/Select/types.ts
@@ -41,13 +41,13 @@ export interface SelectCommonProps<T> {
   minMenuHeight?: number;
   maxVisibleValues?: number;
   menuPlacement?: 'auto' | 'bottom' | 'top';
-  /**
-   * @deprecated Setting `menuPortalTarget` to null will revert to previous `Select` behaviour.
-   * This is provided as an escape hatch for cases where portalling is a breaking change (e.g. `Select` wrapped in `ClickOutsideWrapper`).
-   * It's recommended to achieve the same behaviour using `onCloseMenu`, as this will be removed at some point.
-   */
-  menuPortalTarget?: HTMLElement | null;
   menuPosition?: 'fixed' | 'absolute';
+  /**
+   * @deprecated
+   * Setting to true will portal the menu to `document.body`.
+   * This property will soon be removed and portalling will be the default behavior.
+   */
+  menuShouldPortal?: boolean;
   /** The message to display when no options could be found */
   noOptionsMessage?: string;
   onBlur?: () => void;
diff --git a/packages/grafana-ui/src/components/StatsPicker/StatsPicker.tsx b/packages/grafana-ui/src/components/StatsPicker/StatsPicker.tsx
index 899c1a6fa7c..0aaad675ce0 100644
--- a/packages/grafana-ui/src/components/StatsPicker/StatsPicker.tsx
+++ b/packages/grafana-ui/src/components/StatsPicker/StatsPicker.tsx
@@ -68,6 +68,7 @@ export class StatsPicker extends PureComponent<Props> {
     const select = fieldReducers.selectOptions(stats);
     return (
       <Select
+        menuShouldPortal
         value={select.current}
         className={className}
         isClearable={!defaultStat}
diff --git a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
index c953ea85cf9..f5e7a172fde 100644
--- a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
+++ b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
@@ -134,7 +134,12 @@ export const ThemeDemo = () => {
               <Input placeholder="Placeholder" value="Disabled value" />
             </Field>
             <Field label="Select">
-              <Select options={selectOptions} value={selectValue} onChange={(v) => setSelectValue(v?.value!)} />
+              <Select
+                menuShouldPortal
+                options={selectOptions}
+                value={selectValue}
+                onChange={(v) => setSelectValue(v?.value!)}
+              />
             </Field>
             <Field label="Radio label">
               <RadioButtonGroup options={radioOptions} value={radioValue} onChange={setRadioValue} />
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingEditRow.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingEditRow.tsx
index 6320bc05148..90d89a6ccfb 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingEditRow.tsx
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingEditRow.tsx
@@ -148,6 +148,7 @@ export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDupl
             )}
             {mapping.type === MappingType.SpecialValue && (
               <Select
+                menuShouldPortal
                 value={specialMatchOptions.find((v) => v.value === mapping.specialMatch)}
                 options={specialMatchOptions}
                 onChange={onChangeSpecialMatch}
diff --git a/packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx b/packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx
index d73d25cdd02..becb214cf7a 100644
--- a/packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx
+++ b/packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx
@@ -56,6 +56,7 @@ export function ValuePicker<T>({
       {isPicking && (
         <span>
           <Select
+            menuShouldPortal
             placeholder={label}
             options={options}
             aria-label={selectors.components.ValuePicker.select(label)}
diff --git a/packages/grafana-ui/src/options/builder/axis.tsx b/packages/grafana-ui/src/options/builder/axis.tsx
index b3599712571..18e89251d6f 100644
--- a/packages/grafana-ui/src/options/builder/axis.tsx
+++ b/packages/grafana-ui/src/options/builder/axis.tsx
@@ -134,6 +134,7 @@ const ScaleDistributionEditor: React.FC<FieldOverrideEditorProps<ScaleDistributi
       />
       {value.type === ScaleDistribution.Log && (
         <Select
+          menuShouldPortal
           allowCustomValue={false}
           autoFocus
           options={LOG_DISTRIBUTION_OPTIONS}
diff --git a/plugins-bundled/internal/input-datasource/src/InputQueryEditor.tsx b/plugins-bundled/internal/input-datasource/src/InputQueryEditor.tsx
index d051b888400..e48b89ac31e 100644
--- a/plugins-bundled/internal/input-datasource/src/InputQueryEditor.tsx
+++ b/plugins-bundled/internal/input-datasource/src/InputQueryEditor.tsx
@@ -69,7 +69,7 @@ export class InputQueryEditor extends PureComponent<Props, State> {
       <div>
         <InlineField label="Data" labelWidth={8}>
           <>
-            <Select width={20} options={options} value={selected} onChange={this.onSourceChange} />
+            <Select menuShouldPortal width={20} options={options} value={selected} onChange={this.onSourceChange} />
             {query.data ? (
               <div style={{ alignSelf: 'center' }}>{describeDataFrame(query.data)}</div>
             ) : (
diff --git a/public/app/core/components/FolderFilter/FolderFilter.tsx b/public/app/core/components/FolderFilter/FolderFilter.tsx
index 5fa1e4fd2b5..015e5c04c55 100644
--- a/public/app/core/components/FolderFilter/FolderFilter.tsx
+++ b/public/app/core/components/FolderFilter/FolderFilter.tsx
@@ -50,6 +50,7 @@ export function FolderFilter({ onChange: propsOnChange, maxMenuHeight }: FolderF
         </span>
       )}
       <AsyncMultiSelect
+        menuShouldPortal
         {...selectOptions}
         isLoading={loading}
         loadOptions={debouncedLoadOptions}
diff --git a/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx b/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
index ad9092515d9..bed3de8fce7 100644
--- a/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
+++ b/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
@@ -56,7 +56,7 @@ export const PanelTypeFilter = ({ onChange: propsOnChange, maxMenuHeight }: Prop
           Clear types
         </span>
       )}
-      <MultiSelect {...selectOptions} prefix={<Icon name="filter" />} aria-label="Panel Type filter" />
+      <MultiSelect menuShouldPortal {...selectOptions} prefix={<Icon name="filter" />} aria-label="Panel Type filter" />
     </div>
   );
 };
diff --git a/public/app/core/components/PermissionList/AddPermission.tsx b/public/app/core/components/PermissionList/AddPermission.tsx
index 8e23d9849af..ac205449093 100644
--- a/public/app/core/components/PermissionList/AddPermission.tsx
+++ b/public/app/core/components/PermissionList/AddPermission.tsx
@@ -100,6 +100,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
           {() => (
             <HorizontalGroup>
               <Select
+                menuShouldPortal
                 isSearchable={false}
                 value={this.state.type}
                 options={dashboardAclTargets}
@@ -117,6 +118,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
               <span className={styles.label}>Can</span>
 
               <Select
+                menuShouldPortal
                 isSearchable={false}
                 value={this.state.permission}
                 options={dashboardPermissionLevels}
diff --git a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
index 0f46c59c6ae..aa231cb6045 100644
--- a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
@@ -25,6 +25,7 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
         <td>
           <div className="gf-form">
             <Select
+              menuShouldPortal
               options={dashboardPermissionLevels}
               onChange={() => {}}
               disabled={true}
diff --git a/public/app/core/components/PermissionList/PermissionListItem.tsx b/public/app/core/components/PermissionList/PermissionListItem.tsx
index 74dba9950d4..2a14c5bfd60 100644
--- a/public/app/core/components/PermissionList/PermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/PermissionListItem.tsx
@@ -75,6 +75,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
         <td className="query-keyword">Can</td>
         <td>
           <Select
+            menuShouldPortal
             isSearchable={false}
             options={dashboardPermissionLevels}
             onChange={this.onPermissionChanged}
diff --git a/public/app/core/components/Select/DashboardPicker.tsx b/public/app/core/components/Select/DashboardPicker.tsx
index 71366fc1eaa..0803e825c70 100644
--- a/public/app/core/components/Select/DashboardPicker.tsx
+++ b/public/app/core/components/Select/DashboardPicker.tsx
@@ -35,6 +35,7 @@ export const DashboardPicker: FC<Props> = ({ onChange, value, width, isClearable
 
   return (
     <AsyncSelect
+      menuShouldPortal
       width={width}
       isClearable={isClearable}
       defaultOptions={true}
diff --git a/public/app/core/components/Select/FolderPicker.tsx b/public/app/core/components/Select/FolderPicker.tsx
index 51247a1d716..a1653017032 100644
--- a/public/app/core/components/Select/FolderPicker.tsx
+++ b/public/app/core/components/Select/FolderPicker.tsx
@@ -165,6 +165,7 @@ export class FolderPicker extends PureComponent<Props, State> {
     return (
       <div aria-label={selectors.components.FolderPicker.container}>
         <AsyncSelect
+          menuShouldPortal
           loadingMessage="Loading folders..."
           defaultOptions
           defaultValue={folder}
diff --git a/public/app/core/components/Select/MetricSelect.tsx b/public/app/core/components/Select/MetricSelect.tsx
index e45010c5776..cafc9e6d4ef 100644
--- a/public/app/core/components/Select/MetricSelect.tsx
+++ b/public/app/core/components/Select/MetricSelect.tsx
@@ -24,6 +24,7 @@ export const MetricSelect: FC<Props> = (props) => {
 
   return (
     <Select
+      menuShouldPortal
       className={className}
       isMulti={false}
       isClearable={false}
diff --git a/public/app/core/components/Select/OrgPicker.tsx b/public/app/core/components/Select/OrgPicker.tsx
index 76007b6ea2d..af226b5fe70 100644
--- a/public/app/core/components/Select/OrgPicker.tsx
+++ b/public/app/core/components/Select/OrgPicker.tsx
@@ -48,6 +48,7 @@ export class OrgPicker extends PureComponent<Props, State> {
 
     return (
       <AsyncSelect
+        menuShouldPortal
         className={className}
         isLoading={isLoading}
         defaultOptions={true}
diff --git a/public/app/core/components/Select/SortPicker.tsx b/public/app/core/components/Select/SortPicker.tsx
index 266c6a393b1..522a62abef9 100644
--- a/public/app/core/components/Select/SortPicker.tsx
+++ b/public/app/core/components/Select/SortPicker.tsx
@@ -28,6 +28,7 @@ export const SortPicker: FC<Props> = ({ onChange, value, placeholder, filter })
   const selected = options?.find((opt) => opt.value === value);
   return !loading ? (
     <Select
+      menuShouldPortal
       key={value}
       width={25}
       onChange={onChange}
diff --git a/public/app/core/components/Select/TeamPicker.tsx b/public/app/core/components/Select/TeamPicker.tsx
index 20c9fb3a88a..55a6b18e0ea 100644
--- a/public/app/core/components/Select/TeamPicker.tsx
+++ b/public/app/core/components/Select/TeamPicker.tsx
@@ -57,6 +57,7 @@ export class TeamPicker extends Component<Props, State> {
     return (
       <div className="user-picker" data-testid="teamPicker">
         <AsyncSelect
+          menuShouldPortal
           isLoading={isLoading}
           defaultOptions={true}
           loadOptions={this.debouncedSearch}
diff --git a/public/app/core/components/Select/UserPicker.tsx b/public/app/core/components/Select/UserPicker.tsx
index b001eb7fafb..872bb430be4 100644
--- a/public/app/core/components/Select/UserPicker.tsx
+++ b/public/app/core/components/Select/UserPicker.tsx
@@ -65,6 +65,7 @@ export class UserPicker extends Component<Props, State> {
     return (
       <div className="user-picker" data-testid="userPicker">
         <AsyncSelect
+          menuShouldPortal
           isClearable
           className={className}
           isLoading={isLoading}
diff --git a/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap b/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
index 064c269b24e..a316880bbc5 100644
--- a/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
+++ b/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`FolderPicker should render 1`] = `
     defaultValue={null}
     loadOptions={[Function]}
     loadingMessage="Loading folders..."
+    menuShouldPortal={true}
     onChange={[Function]}
     onCreateOption={[Function]}
     value={null}
diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
index 6af73670b16..e9c9ce09435 100644
--- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx
+++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
@@ -145,6 +145,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
                 aria-label="User preferences home dashboard drop down"
               >
                 <Select
+                  menuShouldPortal
                   value={dashboards.find((dashboard) => dashboard.id === homeDashboardId)}
                   getOptionValue={(i) => i.id}
                   getOptionLabel={this.getFullDashName}
diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx
index e72ee56a1fb..cf0e35d1b9a 100644
--- a/public/app/core/components/TagFilter/TagFilter.tsx
+++ b/public/app/core/components/TagFilter/TagFilter.tsx
@@ -107,7 +107,7 @@ export const TagFilter: FC<Props> = ({
           Clear tags
         </span>
       )}
-      <AsyncMultiSelect {...selectOptions} prefix={<Icon name="tag-alt" />} aria-label="Tag filter" />
+      <AsyncMultiSelect menuShouldPortal {...selectOptions} prefix={<Icon name="tag-alt" />} aria-label="Tag filter" />
     </div>
   );
 };
diff --git a/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx b/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx
index 9ca3eed260f..6f7c1d97e4c 100644
--- a/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx
@@ -300,6 +300,7 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
         </div>
         <div className="gf-form">
           <Select
+            menuShouldPortal
             allowCustomValue={true}
             placeholder="Field or number"
             options={leftNames}
@@ -308,12 +309,14 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
             onChange={this.onBinaryLeftChanged}
           />
           <Select
+            menuShouldPortal
             className="width-8 gf-form-spacing"
             options={ops}
             value={options.operator ?? ops[0].value}
             onChange={this.onBinaryOperationChanged}
           />
           <Select
+            menuShouldPortal
             allowCustomValue={true}
             placeholder="Field or number"
             className="min-width-10"
@@ -341,6 +344,7 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
           <div className="gf-form">
             <div className="gf-form-label width-8">Mode</div>
             <Select
+              menuShouldPortal
               className="width-18"
               options={calculationModes}
               value={calculationModes.find((v) => v.value === mode)}
diff --git a/public/app/core/components/TransformersUI/ConcatenateTransformerEditor.tsx b/public/app/core/components/TransformersUI/ConcatenateTransformerEditor.tsx
index 5f1f45258a7..0e7749234f0 100644
--- a/public/app/core/components/TransformersUI/ConcatenateTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/ConcatenateTransformerEditor.tsx
@@ -57,6 +57,7 @@ export class ConcatenateTransformerEditor extends React.PureComponent<Concatenat
           <div className="gf-form">
             <div className="gf-form-label width-8">Name</div>
             <Select
+              menuShouldPortal
               className="width-18"
               options={nameModes}
               value={nameModes.find((v) => v.value === frameNameMode)}
diff --git a/public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueFilterEditor.tsx b/public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueFilterEditor.tsx
index efdc3118054..44fce104fbf 100644
--- a/public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueFilterEditor.tsx
+++ b/public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueFilterEditor.tsx
@@ -77,6 +77,7 @@ export const FilterByValueFilterEditor: React.FC<Props> = (props) => {
       <div className="gf-form gf-form-spacing">
         <div className="gf-form-label width-7">Field</div>
         <Select
+          menuShouldPortal
           className="min-width-15 max-width-24"
           placeholder="Field Name"
           options={fieldsAsOptions}
@@ -87,6 +88,7 @@ export const FilterByValueFilterEditor: React.FC<Props> = (props) => {
       <div className="gf-form gf-form-spacing">
         <div className="gf-form-label">Match</div>
         <Select
+          menuShouldPortal
           className="width-12"
           placeholder="Select test"
           options={matcherOptions}
diff --git a/public/app/core/components/TransformersUI/GroupByTransformerEditor.tsx b/public/app/core/components/TransformersUI/GroupByTransformerEditor.tsx
index 5a1270cef2f..a85cc42e5fb 100644
--- a/public/app/core/components/TransformersUI/GroupByTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/GroupByTransformerEditor.tsx
@@ -86,6 +86,7 @@ export const GroupByFieldConfiguration: React.FC<FieldProps> = ({ fieldName, con
       <div className={cx('gf-form', styles.cell)}>
         <div className={cx('gf-form-spacing', styles.rowSpacing)}>
           <Select
+            menuShouldPortal
             className="width-12"
             options={options}
             value={config?.operation}
diff --git a/public/app/core/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx b/public/app/core/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx
index c1b9b2dee1a..13667d66767 100644
--- a/public/app/core/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx
@@ -42,6 +42,7 @@ export const LabelsAsFieldsTransformerEditor: React.FC<TransformerUIProps<Labels
       <div className="gf-form">
         <div className="gf-form-label width-8">Value field name</div>
         <Select
+          menuShouldPortal
           isClearable={true}
           allowCustomValue={false}
           placeholder="(Optional) Select label"
diff --git a/public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx b/public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx
index 93fbc712c4b..24be86576e0 100644
--- a/public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx
@@ -64,6 +64,7 @@ export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransfor
             Mode
           </div>
           <Select
+            menuShouldPortal
             options={modes}
             value={modes.find((v) => v.value === options.mode) || modes[0]}
             onChange={onSelectMode}
diff --git a/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx b/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx
index ad3cf65ff2a..4146cfb24d1 100644
--- a/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx
@@ -32,7 +32,7 @@ export const SeriesToFieldsTransformerEditor: React.FC<TransformerUIProps<Series
     <div className="gf-form-inline">
       <div className="gf-form gf-form--grow">
         <div className="gf-form-label width-8">Field name</div>
-        <Select options={fieldNames} value={options.byField} onChange={onSelectField} isClearable />
+        <Select menuShouldPortal options={fieldNames} value={options.byField} onChange={onSelectField} isClearable />
       </div>
     </div>
   );
diff --git a/public/app/core/components/TransformersUI/SortByTransformerEditor.tsx b/public/app/core/components/TransformersUI/SortByTransformerEditor.tsx
index 4ac53bcd525..d23978972d2 100644
--- a/public/app/core/components/TransformersUI/SortByTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/SortByTransformerEditor.tsx
@@ -28,6 +28,7 @@ export const SortByTransformerEditor: React.FC<TransformerUIProps<SortByTransfor
           <InlineFieldRow key={`${s.field}/${index}`}>
             <InlineField label="Field" labelWidth={10} grow={true}>
               <Select
+                menuShouldPortal
                 options={fieldNames}
                 value={s.field}
                 placeholder="Select field"
diff --git a/public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx b/public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx
index 492d100824e..1a0a8303a44 100644
--- a/public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx
@@ -51,12 +51,12 @@ export function ConfigFromQueryTransformerEditor({ input, onChange, options }: P
     <>
       <InlineFieldRow>
         <InlineField label="Config query" labelWidth={20}>
-          <Select onChange={onRefIdChange} options={refIds} value={currentRefId} width={30} />
+          <Select menuShouldPortal onChange={onRefIdChange} options={refIds} value={currentRefId} width={30} />
         </InlineField>
       </InlineFieldRow>
       <InlineFieldRow>
         <InlineField label="Apply to" labelWidth={20}>
-          <Select onChange={onMatcherChange} options={matchers} value={currentMatcher.id} width={30} />
+          <Select menuShouldPortal onChange={onMatcherChange} options={matchers} value={currentMatcher.id} width={30} />
         </InlineField>
       </InlineFieldRow>
       <InlineFieldRow>
@@ -91,10 +91,10 @@ export const configFromQueryTransformRegistryItem: TransformerRegistryItem<Confi
   description: configFromDataTransformer.description,
   state: PluginState.beta,
   help: `
-### Use cases 
+### Use cases
 
-This transformation allow you select one query and from it extract standard options like 
-**Min**, **Max**, **Unit** and **Thresholds** and apply it to other query results. 
+This transformation allows you select one query and from it extract standard options such as 
+**Min**, **Max**, **Unit**, and **Thresholds** and apply them to other query results.
 This enables dynamic query driven visualization configuration.
 
 ### Options
@@ -130,15 +130,14 @@ Output (Same as Input[0] but now with config on the Value field)
 | 1626178119127 | 10                      |
 | 1626178119129 | 30                      |
 
-As you can see each row in the source data becomes a separate field. Each field now also has a max 
-config option set. Options like min, max, unit and thresholds are all part of field configuration 
-and if set like this will be used by the visualization instead of any options manually configured 
+Each row in the source data becomes a separate field. Each field now also has a maximum
+configuration option set. Options such as **min**, **max**, **unit**, and **thresholds** are all part of field configuration, and if they are set like this, they will be used by the visualization instead of any options that are manually configured.
 in the panel editor options pane.
 
 ## Value mappings
 
-You can also transform a query result into value mappings. This is is a bit different as here every 
-row in the config query result will be used to define a single value mapping row. See example below. 
+You can also transform a query result into value mappings. This is is a bit different because every
+row in the configuration query result is used to define a single value mapping row. See the following example.
 
 Config query result:
 
diff --git a/public/app/core/components/TransformersUI/fieldToConfigMapping/FieldToConfigMappingEditor.tsx b/public/app/core/components/TransformersUI/fieldToConfigMapping/FieldToConfigMappingEditor.tsx
index 87494d8a62b..d65317ac1f9 100644
--- a/public/app/core/components/TransformersUI/fieldToConfigMapping/FieldToConfigMappingEditor.tsx
+++ b/public/app/core/components/TransformersUI/fieldToConfigMapping/FieldToConfigMappingEditor.tsx
@@ -73,6 +73,7 @@ export function FieldToConfigMappingEditor({ frame, mappings, onChange, withRedu
             <td className={styles.labelCell}>{row.fieldName}</td>
             <td className={styles.selectCell} data-testid={`${row.fieldName}-config-key`}>
               <Select
+                menuShouldPortal
                 options={configProps}
                 value={row.configOption}
                 placeholder={row.placeholder}
diff --git a/public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx b/public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx
index e4f24118804..df8b9819845 100644
--- a/public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx
+++ b/public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx
@@ -53,6 +53,7 @@ export function PrepareTimeSeriesEditor(props: TransformerUIProps<PrepareTimeSer
       <InlineFieldRow>
         <InlineField label="Format" labelWidth={12}>
           <Select
+            menuShouldPortal
             width={35}
             options={formats}
             value={formats.find((v) => v.value === options.format) || formats[0]}
@@ -85,9 +86,9 @@ export const prepareTimeseriesTransformerRegistryItem: TransformerRegistryItem<P
   name: prepareTimeSeriesTransformer.name,
   description: prepareTimeSeriesTransformer.description,
   help: `
-  ### Use cases 
-  
-  This will take query results and transform them into a predictable timeseries format.  
+  ### Use cases
+
+  This takes query results and transforms them into a predictable timeseries format.
   This transformer may be especially useful when using old panels that only expect the
   many-frame timeseries format.
   `,
diff --git a/public/app/features/admin/OrgRolePicker.tsx b/public/app/features/admin/OrgRolePicker.tsx
index 7052f3b2372..9157ac23f13 100644
--- a/public/app/features/admin/OrgRolePicker.tsx
+++ b/public/app/features/admin/OrgRolePicker.tsx
@@ -12,6 +12,7 @@ const options = Object.keys(OrgRole).map((key) => ({ label: key, value: key }));
 
 export const OrgRolePicker: FC<Props> = ({ value, onChange, ...restProps }) => (
   <Select
+    menuShouldPortal
     value={value}
     options={options}
     onChange={(val) => onChange(val.value as OrgRole)}
diff --git a/public/app/features/alerting/AlertRuleList.tsx b/public/app/features/alerting/AlertRuleList.tsx
index b44a2aba32a..a9735b87288 100644
--- a/public/app/features/alerting/AlertRuleList.tsx
+++ b/public/app/features/alerting/AlertRuleList.tsx
@@ -106,6 +106,7 @@ export class AlertRuleListUnconnected extends PureComponent<Props> {
 
               <div className="width-13">
                 <Select
+                  menuShouldPortal
                   options={this.stateFilters}
                   onChange={this.onStateFilterChanged}
                   value={this.getStateFilter()}
diff --git a/public/app/features/alerting/components/BasicSettings.tsx b/public/app/features/alerting/components/BasicSettings.tsx
index 1b996d3c6af..75ccb993c60 100644
--- a/public/app/features/alerting/components/BasicSettings.tsx
+++ b/public/app/features/alerting/components/BasicSettings.tsx
@@ -30,7 +30,7 @@ export const BasicSettings: FC<Props> = ({
       <Field label="Type">
         <InputControl
           name="type"
-          render={({ field: { ref, ...field } }) => <Select {...field} options={channels} />}
+          render={({ field: { ref, ...field } }) => <Select menuShouldPortal {...field} options={channels} />}
           control={control}
           rules={{ required: true }}
         />
diff --git a/public/app/features/alerting/components/OptionElement.tsx b/public/app/features/alerting/components/OptionElement.tsx
index 47306dc5878..4c949202de5 100644
--- a/public/app/features/alerting/components/OptionElement.tsx
+++ b/public/app/features/alerting/components/OptionElement.tsx
@@ -29,7 +29,7 @@ export const OptionElement: FC<Props> = ({ control, option, register, invalid })
           control={control}
           name={`${modelValue}`}
           render={({ field: { ref, ...field } }) => (
-            <Select {...field} options={option.selectOptions ?? undefined} invalid={invalid} />
+            <Select menuShouldPortal {...field} options={option.selectOptions ?? undefined} invalid={invalid} />
           )}
         />
       );
diff --git a/public/app/features/alerting/unified/components/AlertManagerPicker.tsx b/public/app/features/alerting/unified/components/AlertManagerPicker.tsx
index f276e2f6c21..a2e4ef2e06d 100644
--- a/public/app/features/alerting/unified/components/AlertManagerPicker.tsx
+++ b/public/app/features/alerting/unified/components/AlertManagerPicker.tsx
@@ -46,6 +46,7 @@ export const AlertManagerPicker: FC<Props> = ({ onChange, current, disabled = fa
       data-testid="alertmanager-picker"
     >
       <Select
+        menuShouldPortal
         width={29}
         className="ds-picker select-container"
         backspaceRemovesValue={false}
diff --git a/public/app/features/alerting/unified/components/amroutes/AmRootRouteForm.tsx b/public/app/features/alerting/unified/components/amroutes/AmRootRouteForm.tsx
index 0cb73e02eef..e394930b33f 100644
--- a/public/app/features/alerting/unified/components/amroutes/AmRootRouteForm.tsx
+++ b/public/app/features/alerting/unified/components/amroutes/AmRootRouteForm.tsx
@@ -42,6 +42,7 @@ export const AmRootRouteForm: FC<AmRootRouteFormProps> = ({
                 <InputControl
                   render={({ field: { onChange, ref, ...field } }) => (
                     <Select
+                      menuShouldPortal
                       {...field}
                       className={styles.input}
                       onChange={(value) => onChange(mapSelectValueToString(value))}
@@ -68,6 +69,7 @@ export const AmRootRouteForm: FC<AmRootRouteFormProps> = ({
             <InputControl
               render={({ field: { onChange, ref, ...field } }) => (
                 <MultiSelect
+                  menuShouldPortal
                   {...field}
                   allowCustomValue
                   className={styles.input}
@@ -113,6 +115,7 @@ export const AmRootRouteForm: FC<AmRootRouteFormProps> = ({
                   <InputControl
                     render={({ field: { onChange, ref, ...field } }) => (
                       <Select
+                        menuShouldPortal
                         {...field}
                         className={styles.input}
                         onChange={(value) => onChange(mapSelectValueToString(value))}
@@ -147,6 +150,7 @@ export const AmRootRouteForm: FC<AmRootRouteFormProps> = ({
                   <InputControl
                     render={({ field: { onChange, ref, ...field } }) => (
                       <Select
+                        menuShouldPortal
                         {...field}
                         className={styles.input}
                         onChange={(value) => onChange(mapSelectValueToString(value))}
@@ -181,6 +185,7 @@ export const AmRootRouteForm: FC<AmRootRouteFormProps> = ({
                   <InputControl
                     render={({ field: { onChange, ref, ...field } }) => (
                       <Select
+                        menuShouldPortal
                         {...field}
                         className={styles.input}
                         menuPlacement="top"
diff --git a/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedForm.tsx b/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedForm.tsx
index 1aa1871891c..9e0c66f91cd 100644
--- a/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedForm.tsx
+++ b/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedForm.tsx
@@ -117,6 +117,7 @@ export const AmRoutesExpandedForm: FC<AmRoutesExpandedFormProps> = ({ onCancel,
             <InputControl
               render={({ field: { onChange, ref, ...field } }) => (
                 <Select
+                  menuShouldPortal
                   {...field}
                   className={formStyles.input}
                   onChange={(value) => onChange(mapSelectValueToString(value))}
@@ -141,6 +142,7 @@ export const AmRoutesExpandedForm: FC<AmRoutesExpandedFormProps> = ({ onCancel,
               <InputControl
                 render={({ field: { onChange, ref, ...field } }) => (
                   <MultiSelect
+                    menuShouldPortal
                     {...field}
                     allowCustomValue
                     className={formStyles.input}
@@ -188,6 +190,7 @@ export const AmRoutesExpandedForm: FC<AmRoutesExpandedFormProps> = ({ onCancel,
                     <InputControl
                       render={({ field: { onChange, ref, ...field } }) => (
                         <Select
+                          menuShouldPortal
                           {...field}
                           className={formStyles.input}
                           onChange={(value) => onChange(mapSelectValueToString(value))}
@@ -221,6 +224,7 @@ export const AmRoutesExpandedForm: FC<AmRoutesExpandedFormProps> = ({ onCancel,
                     <InputControl
                       render={({ field: { onChange, ref, ...field } }) => (
                         <Select
+                          menuShouldPortal
                           {...field}
                           className={formStyles.input}
                           onChange={(value) => onChange(mapSelectValueToString(value))}
@@ -254,6 +258,7 @@ export const AmRoutesExpandedForm: FC<AmRoutesExpandedFormProps> = ({ onCancel,
                     <InputControl
                       render={({ field: { onChange, ref, ...field } }) => (
                         <Select
+                          menuShouldPortal
                           {...field}
                           className={formStyles.input}
                           menuPlacement="top"
diff --git a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
index f3db81fd215..a190b0d2f66 100644
--- a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
@@ -75,7 +75,13 @@ export function ChannelSubForm<R extends ChannelValues>({
               name={name('type')}
               defaultValue={defaultValues.type}
               render={({ field: { ref, onChange, ...field } }) => (
-                <Select {...field} width={37} options={typeOptions} onChange={(value) => onChange(value?.value)} />
+                <Select
+                  menuShouldPortal
+                  {...field}
+                  width={37}
+                  options={typeOptions}
+                  onChange={(value) => onChange(value?.value)}
+                />
               )}
               control={control}
               rules={{ required: true }}
diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx
index 5111cd0f41e..55277037e81 100644
--- a/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx
@@ -96,6 +96,7 @@ const OptionInput: FC<Props & { id: string }> = ({ option, invalid, id, pathPref
         <InputControl
           render={({ field: { onChange, ref, ...field } }) => (
             <Select
+              menuShouldPortal
               {...field}
               options={option.selectOptions ?? undefined}
               invalid={invalid}
diff --git a/public/app/features/alerting/unified/components/rule-editor/AlertTypeStep.tsx b/public/app/features/alerting/unified/components/rule-editor/AlertTypeStep.tsx
index 29d91ee093b..fc2f12c001a 100644
--- a/public/app/features/alerting/unified/components/rule-editor/AlertTypeStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/AlertTypeStep.tsx
@@ -73,7 +73,12 @@ export const AlertTypeStep: FC<Props> = ({ editingExistingRule }) => {
         >
           <InputControl
             render={({ field: { onChange, ref, ...field } }) => (
-              <Select {...field} options={alertTypeOptions} onChange={(v: SelectableValue) => onChange(v?.value)} />
+              <Select
+                menuShouldPortal
+                {...field}
+                options={alertTypeOptions}
+                onChange={(v: SelectableValue) => onChange(v?.value)}
+              />
             )}
             name="type"
             control={control}
diff --git a/public/app/features/alerting/unified/components/rule-editor/CloudConditionsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/CloudConditionsStep.tsx
index 9c1ebad23b0..de3f1bf2c8c 100644
--- a/public/app/features/alerting/unified/components/rule-editor/CloudConditionsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/CloudConditionsStep.tsx
@@ -30,6 +30,7 @@ export const CloudConditionsStep: FC = () => {
             name="forTimeUnit"
             render={({ field: { onChange, ref, ...field } }) => (
               <Select
+                menuShouldPortal
                 {...field}
                 options={timeOptions}
                 onChange={(value) => onChange(value?.value)}
diff --git a/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx b/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx
index 16f41f99ad5..75cc88d0fd4 100644
--- a/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx
@@ -47,6 +47,7 @@ export const ConditionField: FC = () => {
         name="condition"
         render={({ field: { onChange, ref, ...field } }) => (
           <Select
+            menuShouldPortal
             {...field}
             width={42}
             options={options}
diff --git a/public/app/features/alerting/unified/components/rule-editor/GrafanaAlertStatePicker.tsx b/public/app/features/alerting/unified/components/rule-editor/GrafanaAlertStatePicker.tsx
index e01453dbc27..9666ea8588a 100644
--- a/public/app/features/alerting/unified/components/rule-editor/GrafanaAlertStatePicker.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/GrafanaAlertStatePicker.tsx
@@ -21,5 +21,5 @@ export const GrafanaAlertStatePicker: FC<Props> = ({ includeNoData, ...props })
     }
     return options.filter((opt) => opt.value !== GrafanaAlertStateDecision.NoData);
   }, [includeNoData]);
-  return <Select options={opts} {...props} />;
+  return <Select menuShouldPortal options={opts} {...props} />;
 };
diff --git a/public/app/features/alerting/unified/components/rule-editor/SelectWIthAdd.tsx b/public/app/features/alerting/unified/components/rule-editor/SelectWIthAdd.tsx
index 6aa55826be5..34ba01e31b2 100644
--- a/public/app/features/alerting/unified/components/rule-editor/SelectWIthAdd.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/SelectWIthAdd.tsx
@@ -55,6 +55,7 @@ export const SelectWithAdd: FC<Props> = ({
   } else {
     return (
       <Select
+        menuShouldPortal
         width={width}
         options={_options}
         value={value}
diff --git a/public/app/features/annotations/components/AnnotationResultMapper.tsx b/public/app/features/annotations/components/AnnotationResultMapper.tsx
index 5405d92f4b9..60fa5ad0f5d 100644
--- a/public/app/features/annotations/components/AnnotationResultMapper.tsx
+++ b/public/app/features/annotations/components/AnnotationResultMapper.tsx
@@ -147,6 +147,7 @@ export class AnnotationFieldMapper extends PureComponent<Props, State> {
         </td>
         {/* <td>
           <Select
+            menuShouldPortal
             value={valueOptions.find(v => v.value === mapping.source) || valueOptions[0]}
             options={valueOptions}
             onChange={(v: SelectableValue<AnnotationEventFieldSource>) => {
@@ -156,6 +157,7 @@ export class AnnotationFieldMapper extends PureComponent<Props, State> {
         </td> */}
         <td>
           <Select
+            menuShouldPortal
             value={currentValue}
             options={picker}
             placeholder={row.placeholder || row.key}
diff --git a/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx b/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx
index 367b602d4f7..02348d9ad11 100644
--- a/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx
+++ b/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx
@@ -87,7 +87,7 @@ export const LinkSettingsEdit: React.FC<LinkSettingsEditProps> = ({ editLinkIdx,
         <Input name="title" id="title" value={linkSettings.title} onChange={onChange} autoFocus={isNew} />
       </Field>
       <Field label="Type">
-        <Select value={linkSettings.type} options={linkTypeOptions} onChange={onTypeChange} />
+        <Select menuShouldPortal value={linkSettings.type} options={linkTypeOptions} onChange={onTypeChange} />
       </Field>
       {linkSettings.type === 'dashboards' && (
         <>
@@ -105,7 +105,7 @@ export const LinkSettingsEdit: React.FC<LinkSettingsEditProps> = ({ editLinkIdx,
             <Input name="tooltip" value={linkSettings.tooltip} onChange={onChange} placeholder="Open dashboard" />
           </Field>
           <Field label="Icon">
-            <Select value={linkSettings.icon} options={linkIconOptions} onChange={onIconChange} />
+            <Select menuShouldPortal value={linkSettings.icon} options={linkIconOptions} onChange={onIconChange} />
           </Field>
         </>
       )}
diff --git a/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx b/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
index eee6f8d1944..375a716779e 100644
--- a/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
@@ -146,6 +146,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
               const maxPerRowOptions = [2, 3, 4, 6, 8, 12].map((value) => ({ label: value.toString(), value }));
               return (
                 <Select
+                  menuShouldPortal
                   options={maxPerRowOptions}
                   value={panel.maxPerRow}
                   onChange={(value) => onPanelConfigChange('maxPerRow', value.value)}
diff --git a/public/app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect.tsx b/public/app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect.tsx
index c2d9ed47c3a..89ffb1d0045 100644
--- a/public/app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect.tsx
+++ b/public/app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect.tsx
@@ -36,5 +36,5 @@ export const RepeatRowSelect: FC<Props> = ({ repeat, onChange }) => {
 
   const onSelectChange = useCallback((option: SelectableValue<string | null>) => onChange(option.value!), [onChange]);
 
-  return <Select value={repeat} onChange={onSelectChange} options={variableOptions} />;
+  return <Select menuShouldPortal value={repeat} onChange={onSelectChange} options={variableOptions} />;
 };
diff --git a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
index d755cb50886..cc3cf9abb18 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
@@ -226,7 +226,13 @@ export class ShareSnapshot extends PureComponent<Props, State> {
           <Input width={30} value={snapshotName} onChange={this.onSnapshotNameChange} />
         </Field>
         <Field label="Expire">
-          <Select width={30} options={expireOptions} value={selectedExpireOption} onChange={this.onExpireChange} />
+          <Select
+            menuShouldPortal
+            width={30}
+            options={expireOptions}
+            value={selectedExpireOption}
+            onChange={this.onExpireChange}
+          />
         </Field>
         <Field
           label="Timeout (seconds)"
diff --git a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
index f279531a639..a04f16549d0 100644
--- a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
@@ -200,6 +200,7 @@ export function RichHistoryQueriesTab(props: Props) {
           {!activeDatasourceOnly && (
             <div aria-label="Filter datasources" className={styles.multiselect}>
               <MultiSelect
+                menuShouldPortal
                 options={listOfDatasources}
                 value={datasourceFilters}
                 placeholder="Filter queries for data sources(s)"
@@ -218,6 +219,7 @@ export function RichHistoryQueriesTab(props: Props) {
           </div>
           <div aria-label="Sort queries" className={styles.sort}>
             <Select
+              menuShouldPortal
               value={sortOrderOptions.filter((order) => order.value === sortOrder)}
               options={sortOrderOptions}
               placeholder="Sort queries by"
diff --git a/public/app/features/explore/RichHistory/RichHistorySettings.tsx b/public/app/features/explore/RichHistory/RichHistorySettings.tsx
index 8d73366a96e..d989e0d1541 100644
--- a/public/app/features/explore/RichHistory/RichHistorySettings.tsx
+++ b/public/app/features/explore/RichHistory/RichHistorySettings.tsx
@@ -84,7 +84,12 @@ export function RichHistorySettings(props: RichHistorySettingsProps) {
         className="space-between"
       >
         <div className={styles.input}>
-          <Select value={selectedOption} options={retentionPeriodOptions} onChange={onChangeRetentionPeriod}></Select>
+          <Select
+            menuShouldPortal
+            value={selectedOption}
+            options={retentionPeriodOptions}
+            onChange={onChangeRetentionPeriod}
+          ></Select>
         </div>
       </Field>
       <Field label="Default active tab" description=" " className="space-between">
diff --git a/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx b/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
index 1c61618cc14..3570d0b3d47 100644
--- a/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
@@ -118,6 +118,7 @@ export function RichHistoryStarredTab(props: Props) {
           {!activeDatasourceOnly && (
             <div aria-label="Filter datasources" className={styles.multiselect}>
               <MultiSelect
+                menuShouldPortal
                 options={listOfDatasources}
                 value={datasourceFilters}
                 placeholder="Filter queries for specific data sources(s)"
@@ -136,6 +137,7 @@ export function RichHistoryStarredTab(props: Props) {
           </div>
           <div aria-label="Sort queries" className={styles.sort}>
             <Select
+              menuShouldPortal
               options={sortOrderOptions}
               value={sortOrderOptions.filter((order) => order.value === sortOrder)}
               placeholder="Sort queries by"
diff --git a/public/app/features/expressions/ExpressionQueryEditor.tsx b/public/app/features/expressions/ExpressionQueryEditor.tsx
index 2d6475f99b3..8c3d2f5d73b 100644
--- a/public/app/features/expressions/ExpressionQueryEditor.tsx
+++ b/public/app/features/expressions/ExpressionQueryEditor.tsx
@@ -45,7 +45,13 @@ export class ExpressionQueryEditor extends PureComponent<Props> {
     return (
       <div>
         <InlineField label="Operation" labelWidth={labelWidth}>
-          <Select options={gelTypes} value={selected} onChange={this.onSelectExpressionType} width={25} />
+          <Select
+            menuShouldPortal
+            options={gelTypes}
+            value={selected}
+            onChange={this.onSelectExpressionType}
+            width={25}
+          />
         </InlineField>
         {this.renderExpressionType()}
       </div>
diff --git a/public/app/features/expressions/components/Condition.tsx b/public/app/features/expressions/components/Condition.tsx
index 2987a2aaa04..a9df2ac796e 100644
--- a/public/app/features/expressions/components/Condition.tsx
+++ b/public/app/features/expressions/components/Condition.tsx
@@ -79,6 +79,7 @@ export const Condition: FC<Props> = ({ condition, index, onChange, onRemoveCondi
         />
       )}
       <Select
+        menuShouldPortal
         options={reducerFunctions}
         onChange={onReducerFunctionChange}
         width={20}
@@ -86,6 +87,7 @@ export const Condition: FC<Props> = ({ condition, index, onChange, onRemoveCondi
       />
       <div className={styles.button}>OF</div>
       <Select
+        menuShouldPortal
         onChange={onRefIdChange}
         options={refIds}
         width={15}
diff --git a/public/app/features/expressions/components/Reduce.tsx b/public/app/features/expressions/components/Reduce.tsx
index b0688faff9d..9ce1ad66034 100644
--- a/public/app/features/expressions/components/Reduce.tsx
+++ b/public/app/features/expressions/components/Reduce.tsx
@@ -24,10 +24,10 @@ export const Reduce: FC<Props> = ({ labelWidth, onChange, refIds, query }) => {
   return (
     <InlineFieldRow>
       <InlineField label="Function" labelWidth={labelWidth}>
-        <Select options={reducerTypes} value={reducer} onChange={onSelectReducer} width={25} />
+        <Select menuShouldPortal options={reducerTypes} value={reducer} onChange={onSelectReducer} width={25} />
       </InlineField>
       <InlineField label="Input" labelWidth={labelWidth}>
-        <Select onChange={onRefIdChange} options={refIds} value={query.expression} width={20} />
+        <Select menuShouldPortal onChange={onRefIdChange} options={refIds} value={query.expression} width={20} />
       </InlineField>
     </InlineFieldRow>
   );
diff --git a/public/app/features/expressions/components/Resample.tsx b/public/app/features/expressions/components/Resample.tsx
index e780dee0793..8cc3d606531 100644
--- a/public/app/features/expressions/components/Resample.tsx
+++ b/public/app/features/expressions/components/Resample.tsx
@@ -34,7 +34,7 @@ export const Resample: FC<Props> = ({ labelWidth, onChange, refIds, query }) =>
     <>
       <InlineFieldRow>
         <InlineField label="Input" labelWidth={labelWidth}>
-          <Select onChange={onRefIdChange} options={refIds} value={query.expression} width={20} />
+          <Select menuShouldPortal onChange={onRefIdChange} options={refIds} value={query.expression} width={20} />
         </InlineField>
       </InlineFieldRow>
       <InlineFieldRow>
@@ -42,10 +42,22 @@ export const Resample: FC<Props> = ({ labelWidth, onChange, refIds, query }) =>
           <Input onChange={onWindowChange} value={query.window} width={15} />
         </InlineField>
         <InlineField label="Downsample">
-          <Select options={downsamplingTypes} value={downsampler} onChange={onSelectDownsampler} width={25} />
+          <Select
+            menuShouldPortal
+            options={downsamplingTypes}
+            value={downsampler}
+            onChange={onSelectDownsampler}
+            width={25}
+          />
         </InlineField>
         <InlineField label="Upsample">
-          <Select options={upsamplingTypes} value={upsampler} onChange={onSelectUpsampler} width={25} />
+          <Select
+            menuShouldPortal
+            options={upsamplingTypes}
+            value={upsampler}
+            onChange={onSelectUpsampler}
+            width={25}
+          />
         </InlineField>
       </InlineFieldRow>
     </>
diff --git a/public/app/features/inspector/InspectDataOptions.tsx b/public/app/features/inspector/InspectDataOptions.tsx
index e0997cce6b0..b0b66e8ec40 100644
--- a/public/app/features/inspector/InspectDataOptions.tsx
+++ b/public/app/features/inspector/InspectDataOptions.tsx
@@ -104,6 +104,7 @@ export const InspectDataOptions: FC<Props> = ({
             {data!.length > 1 && (
               <Field label="Show data frame">
                 <Select
+                  menuShouldPortal
                   options={selectableOptions}
                   value={selectedDataFrame}
                   onChange={onDataFrameChange}
diff --git a/public/app/features/inspector/InspectJSONTab.tsx b/public/app/features/inspector/InspectJSONTab.tsx
index 296d9b101fa..39315e6c7d2 100644
--- a/public/app/features/inspector/InspectJSONTab.tsx
+++ b/public/app/features/inspector/InspectJSONTab.tsx
@@ -132,7 +132,7 @@ export class InspectJSONTab extends PureComponent<Props, State> {
       <>
         <div className={styles.toolbar} aria-label={selectors.components.PanelInspector.Json.content}>
           <Field label="Select source" className="flex-grow-1">
-            <Select options={jsonOptions} value={selected} onChange={this.onSelectChanged} />
+            <Select menuShouldPortal options={jsonOptions} value={selected} onChange={this.onSelectChanged} />
           </Field>
           {this.hasPanelJSON && isPanelJSON && canEdit && (
             <Button className={styles.toolbarItem} onClick={this.onApplyPanelModel}>
diff --git a/public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx b/public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx
index 0df0b937ad8..f8892857b4d 100644
--- a/public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx
+++ b/public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx
@@ -54,6 +54,7 @@ export function OpenLibraryPanelModal({ libraryPanel, onDismiss }: OpenLibraryPa
               .Please choose which dashboard to view the panel in:
             </p>
             <AsyncSelect
+              menuShouldPortal
               isClearable
               isLoading={loading}
               defaultOptions={true}
diff --git a/public/app/features/plugins/admin/pages/Browse.tsx b/public/app/features/plugins/admin/pages/Browse.tsx
index 6cb4f1e21d3..8c2690cc01f 100644
--- a/public/app/features/plugins/admin/pages/Browse.tsx
+++ b/public/app/features/plugins/admin/pages/Browse.tsx
@@ -86,6 +86,7 @@ export default function Browse({ route }: GrafanaRouteComponentProps): ReactElem
               </div>
               <div>
                 <Select
+                  menuShouldPortal
                   width={24}
                   value={sortBy}
                   onChange={onSortByChange}
diff --git a/public/app/features/teams/TeamMemberRow.tsx b/public/app/features/teams/TeamMemberRow.tsx
index 7485baa7fc5..392fbb97025 100644
--- a/public/app/features/teams/TeamMemberRow.tsx
+++ b/public/app/features/teams/TeamMemberRow.tsx
@@ -49,6 +49,7 @@ export class TeamMemberRow extends PureComponent<Props> {
           <div className="gf-form">
             {signedInUserIsTeamAdmin && (
               <Select
+                menuShouldPortal
                 isSearchable={false}
                 options={teamsPermissionLevels}
                 onChange={(item) => this.onPermissionChange(item, member)}
diff --git a/public/app/features/teams/__snapshots__/TeamMemberRow.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamMemberRow.test.tsx.snap
index 1180cb8ffef..071326ce2f3 100644
--- a/public/app/features/teams/__snapshots__/TeamMemberRow.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamMemberRow.test.tsx.snap
@@ -107,6 +107,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned off should not ren
           isMulti={false}
           isSearchable={false}
           maxMenuHeight={300}
+          menuShouldPortal={true}
           onChange={[Function]}
           openMenuOnFocus={false}
           options={
@@ -197,6 +198,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
           isMulti={false}
           isSearchable={false}
           maxMenuHeight={300}
+          menuShouldPortal={true}
           onChange={[Function]}
           openMenuOnFocus={false}
           options={
diff --git a/public/app/features/variables/editor/VariableSelectField.tsx b/public/app/features/variables/editor/VariableSelectField.tsx
index 48f1beb7327..640b0aab404 100644
--- a/public/app/features/variables/editor/VariableSelectField.tsx
+++ b/public/app/features/variables/editor/VariableSelectField.tsx
@@ -33,6 +33,7 @@ export function VariableSelectField({
       </InlineFormLabel>
       <div aria-label={ariaLabel}>
         <Select
+          menuShouldPortal
           onChange={onChange}
           value={value}
           width={width ?? 25}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx
index 7b94cb376f4..ed5cf249a27 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx
@@ -21,6 +21,7 @@ export const Aggregation: FC<Props> = (props) => {
   return (
     <QueryEditorField labelWidth={18} label="Group by function" data-testid="cloud-monitoring-aggregation">
       <Select
+        menuShouldPortal
         width={16}
         onChange={({ value }) => props.onChange(value!)}
         value={selected}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/AlignmentFunction.tsx b/public/app/plugins/datasource/cloud-monitoring/components/AlignmentFunction.tsx
index 700564aa964..9d8fd8ab959 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/AlignmentFunction.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/AlignmentFunction.tsx
@@ -20,6 +20,7 @@ export const AlignmentFunction: FC<Props> = ({ query, templateVariableOptions, o
 
   return (
     <Select
+      menuShouldPortal
       width={SELECT_WIDTH}
       onChange={({ value }) => onChange({ ...query, perSeriesAligner: value! })}
       value={[...alignOptions, ...templateVariableOptions].find((s) => s.value === perSeriesAligner)}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriod.tsx b/public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriod.tsx
index ed472a76b94..707cc12e6da 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriod.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriod.tsx
@@ -24,6 +24,7 @@ export const AlignmentPeriod: FC<Props> = ({ templateVariableOptions, onChange,
 
   return (
     <Select
+      menuShouldPortal
       width={selectWidth}
       onChange={({ value }) => onChange({ ...query, alignmentPeriod: value! })}
       value={[...options, ...templateVariableOptions].find((s) => s.value === query.alignmentPeriod)}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx
index 465138c84a2..745ad6eee16 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx
@@ -71,6 +71,7 @@ export class ConfigEditor extends PureComponent<Props> {
         <FieldSet>
           <InlineField label="Authentication type" labelWidth={20}>
             <Select
+              menuShouldPortal
               width={40}
               value={authTypes.find((x) => x.value === jsonData.authenticationType) || authTypes[0]}
               options={authTypes}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
index fc8d4aa43d0..23990e54205 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
@@ -22,6 +22,7 @@ export const VariableQueryField: FC<VariableQueryFieldProps> = ({
   return (
     <InlineField label={label} labelWidth={20}>
       <Select
+        menuShouldPortal
         width={25}
         allowCustomValue={allowCustomValue}
         value={value}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx b/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx
index adfdb66be03..ca92c80f826 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx
@@ -32,6 +32,7 @@ export const GroupBy: FunctionComponent<Props> = ({
       tooltip="You can reduce the amount of data returned for a metric by combining different time series. To combine multiple time series, you can specify a grouping and a function. Grouping is done on the basis of labels. The grouping function is used to combine the time series in the group into a single time series."
     >
       <MultiSelect
+        menuShouldPortal
         width={INPUT_WIDTH}
         placeholder="Choose label"
         options={options}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx b/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx
index af1edf1663e..45b64655bf1 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx
@@ -54,6 +54,7 @@ export const LabelFilter: FunctionComponent<Props> = ({
   const AddFilter = () => {
     return (
       <Select
+        menuShouldPortal
         allowCustomValue
         options={[variableOptionGroup, ...labelsToGroupedOptions(Object.keys(labels))]}
         onChange={({ value: key = '' }) =>
@@ -77,6 +78,7 @@ export const LabelFilter: FunctionComponent<Props> = ({
         {filters.map(({ key, operator, value, condition }, index) => (
           <HorizontalGroup key={index} spacing="xs" width="auto">
             <Select
+              menuShouldPortal
               width={SELECT_WIDTH}
               allowCustomValue
               formatCreateLabel={(v) => `Use label key: ${v}`}
@@ -91,6 +93,7 @@ export const LabelFilter: FunctionComponent<Props> = ({
               }}
             />
             <Select
+              menuShouldPortal
               value={operator}
               options={operators.map(toOption)}
               onChange={({ value: operator = '=' }) =>
@@ -100,6 +103,7 @@ export const LabelFilter: FunctionComponent<Props> = ({
               renderControl={OperatorButton}
             />
             <Select
+              menuShouldPortal
               width={SELECT_WIDTH}
               formatCreateLabel={(v) => `Use label value: ${v}`}
               allowCustomValue
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx
index 3cd4621a686..6822fd3f4a1 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx
@@ -123,6 +123,7 @@ export function Metrics(props: Props) {
       <QueryEditorRow>
         <QueryEditorField labelWidth={LABEL_WIDTH} label="Service">
           <Select
+            menuShouldPortal
             width={SELECT_WIDTH}
             onChange={onServiceChange}
             value={[...services, ...templateVariableOptions].find((s) => s.value === service)}
@@ -138,6 +139,7 @@ export function Metrics(props: Props) {
         </QueryEditorField>
         <QueryEditorField label="Metric name" labelWidth={INNER_LABEL_WIDTH}>
           <Select
+            menuShouldPortal
             width={SELECT_WIDTH}
             onChange={onMetricTypeChange}
             value={[...metrics, ...templateVariableOptions].find((s) => s.value === metricType)}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Project.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Project.tsx
index 85bf1549be4..a69d08af2ed 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Project.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Project.tsx
@@ -29,6 +29,7 @@ export function Project({ projectName, datasource, onChange, templateVariableOpt
   return (
     <QueryEditorRow label="Project">
       <Select
+        menuShouldPortal
         width={SELECT_WIDTH}
         allowCustomValue
         formatCreateLabel={(v) => `Use project: ${v}`}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
index 9e07f353c9f..19f3004a914 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
@@ -76,6 +76,7 @@ export class QueryEditor extends PureComponent<Props> {
           }
         >
           <Select
+            menuShouldPortal
             width={SELECT_WIDTH}
             value={queryType}
             options={QUERY_TYPES}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/SLO/SLO.tsx b/public/app/plugins/datasource/cloud-monitoring/components/SLO/SLO.tsx
index 3399110a2a1..bf9daa006df 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/SLO/SLO.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/SLO/SLO.tsx
@@ -36,6 +36,7 @@ export const SLO: React.FC<Props> = ({ query, templateVariableOptions, onChange,
   return (
     <QueryEditorRow label="SLO">
       <Select
+        menuShouldPortal
         width={SELECT_WIDTH}
         allowCustomValue
         value={query?.sloId && { value: query?.sloId, label: query?.sloName || query?.sloId }}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/SLO/Selector.tsx b/public/app/plugins/datasource/cloud-monitoring/components/SLO/Selector.tsx
index eeab9f6efdd..094e98868f2 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/SLO/Selector.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/SLO/Selector.tsx
@@ -17,6 +17,7 @@ export const Selector: React.FC<Props> = ({ query, templateVariableOptions, onCh
   return (
     <QueryEditorRow label="Selector">
       <Select
+        menuShouldPortal
         width={SELECT_WIDTH}
         allowCustomValue
         value={[...SELECTORS, ...templateVariableOptions].find((s) => s.value === query?.selectorName ?? '')}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/SLO/Service.tsx b/public/app/plugins/datasource/cloud-monitoring/components/SLO/Service.tsx
index 364b701d192..175f32a7f59 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/SLO/Service.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/SLO/Service.tsx
@@ -36,6 +36,7 @@ export const Service: React.FC<Props> = ({ query, templateVariableOptions, onCha
   return (
     <QueryEditorRow label="Service">
       <Select
+        menuShouldPortal
         width={SELECT_WIDTH}
         allowCustomValue
         value={query?.serviceId && { value: query?.serviceId, label: query?.serviceName || query?.serviceId }}
diff --git a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
index 63d3ad0901d..0c703275f24 100644
--- a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
@@ -317,6 +317,7 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
             labelWidth={4}
             inputEl={
               <Select
+                menuShouldPortal
                 options={regions}
                 value={selectedRegion}
                 onChange={(v) => this.setSelectedRegion(v)}
@@ -333,6 +334,7 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
             className="flex-grow-1"
             inputEl={
               <MultiSelect
+                menuShouldPortal
                 allowCustomValue={allowCustomValue}
                 options={unionBy(availableLogGroups, selectedLogGroups, 'value')}
                 value={selectedLogGroups}
diff --git a/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx b/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
index 83058c9d787..90f7e037388 100644
--- a/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
+++ b/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
@@ -173,6 +173,7 @@ export class DashboardQueryEditor extends PureComponent<Props, State> {
         <div className="gf-form">
           <div className="gf-form-label">Use results from panel</div>
           <Select
+            menuShouldPortal
             placeholder="Choose Panel"
             isSearchable={true}
             options={panels}
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx
index b2c4b7260da..901f3299b4d 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx
@@ -52,6 +52,7 @@ export const DateHistogramSettingsEditor = ({ bucketAgg }: Props) => {
     <>
       <InlineField label="Interval" {...inlineFieldProps}>
         <Select
+          menuShouldPortal
           inputId={uniqueId('es-date_histogram-interval')}
           isValidNewOption={isValidNewOption}
           filterOption={optionStartsWithValue}
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx
index 07bc7556e7b..2db26891edb 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx
@@ -22,6 +22,7 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
     <>
       <InlineField label="Order" {...inlineFieldProps}>
         <Select
+          menuShouldPortal
           onChange={(e) => dispatch(changeBucketAggregationSetting(bucketAgg, 'order', e.value!))}
           options={orderOptions}
           value={bucketAgg.settings?.order || bucketAggregationConfig.terms.defaultSettings?.order}
@@ -30,6 +31,7 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
 
       <InlineField label="Size" {...inlineFieldProps}>
         <Select
+          menuShouldPortal
           // TODO: isValidNewOption should only allow numbers & template variables
           {...useCreatableSelectPersistedBehaviour({
             options: sizeOptions,
@@ -52,6 +54,7 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
 
       <InlineField label="Order By" {...inlineFieldProps}>
         <Select
+          menuShouldPortal
           onChange={(e) => dispatch(changeBucketAggregationSetting(bucketAgg, 'orderBy', e.value!))}
           options={orderBy}
           value={bucketAgg.settings?.orderBy || bucketAggregationConfig.terms.defaultSettings?.orderBy}
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx
index 84cce202273..68a9251d475 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx
@@ -20,6 +20,7 @@ export const MovingAverageSettingsEditor = ({ metric }: Props) => {
     <>
       <InlineField label="Model" labelWidth={16}>
         <Select
+          menuShouldPortal
           onChange={(value) => dispatch(changeMetricSetting(metric, 'model', value.value!))}
           options={movingAvgModelOptions}
           value={metric.settings?.model}
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx
index b9c679e1aaa..9b4db4d857d 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx
@@ -23,6 +23,7 @@ export const TopMetricsSettingsEditor: FunctionComponent<Props> = ({ metric }) =
     <>
       <InlineField label="Metrics" labelWidth={16}>
         <AsyncMultiSelect
+          menuShouldPortal
           onChange={(e) =>
             dispatch(
               changeMetricSetting(
@@ -40,6 +41,7 @@ export const TopMetricsSettingsEditor: FunctionComponent<Props> = ({ metric }) =
       </InlineField>
       <InlineField label="Order" labelWidth={16}>
         <Select
+          menuShouldPortal
           onChange={(e) => dispatch(changeMetricSetting(metric, 'order', e.value))}
           options={orderOptions}
           value={metric.settings?.order}
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
index 959d773aa33..48561af4d0e 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
@@ -125,6 +125,7 @@ export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
         <>
           <InlineField label="Unit" {...inlineFieldProps} data-testid="unit-select">
             <Select
+              menuShouldPortal
               id={`ES-query-${query.refId}_metric-${metric.id}-unit`}
               onChange={(e) => dispatch(changeMetricSetting(metric, 'unit', e.value))}
               options={rateAggUnitOptions}
@@ -134,6 +135,7 @@ export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
 
           <InlineField label="Mode" {...inlineFieldProps} data-testid="mode-select">
             <Select
+              menuShouldPortal
               id={`ES-query-${query.refId}_metric-${metric.id}-mode`}
               onChange={(e) => dispatch(changeMetricSetting(metric, 'mode', e.value))}
               options={rateAggModeOptions}
diff --git a/public/app/plugins/datasource/elasticsearch/components/hooks/useCreatableSelectPersistedBehaviour.test.tsx b/public/app/plugins/datasource/elasticsearch/components/hooks/useCreatableSelectPersistedBehaviour.test.tsx
index d50bc823a4f..737ada9d3b7 100644
--- a/public/app/plugins/datasource/elasticsearch/components/hooks/useCreatableSelectPersistedBehaviour.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/hooks/useCreatableSelectPersistedBehaviour.test.tsx
@@ -9,6 +9,7 @@ describe('useCreatableSelectPersistedBehaviour', () => {
     const MyComp = (_: { force?: boolean }) => (
       <InlineField label="label">
         <Select
+          menuShouldPortal
           inputId="select"
           {...useCreatableSelectPersistedBehaviour({
             options: [{ label: 'Option 1', value: 'Option 1' }],
@@ -50,6 +51,7 @@ describe('useCreatableSelectPersistedBehaviour', () => {
     const MyComp = () => (
       <InlineField label="label">
         <Select
+          menuShouldPortal
           inputId="select"
           {...useCreatableSelectPersistedBehaviour({
             options: [{ label: 'Option 1', value: 'Option 1' }],
@@ -87,6 +89,7 @@ describe('useCreatableSelectPersistedBehaviour', () => {
     const MyComp = (_: { force?: boolean }) => (
       <InlineField label="label">
         <Select
+          menuShouldPortal
           inputId="select"
           {...useCreatableSelectPersistedBehaviour({
             options: [{ label: 'Option 1', value: 'Option 1' }],
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx b/public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx
index 9cf6c0233f8..f103b86b701 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx
@@ -53,6 +53,7 @@ export const ElasticDetails = ({ value, onChange }: Props) => {
               label="Pattern"
               inputEl={
                 <Select
+                  menuShouldPortal
                   options={indexPatternTypes}
                   onChange={intervalHandler(value, onChange)}
                   value={indexPatternTypes.find(
@@ -82,6 +83,7 @@ export const ElasticDetails = ({ value, onChange }: Props) => {
             label="Version"
             inputEl={
               <Select
+                menuShouldPortal
                 options={esVersions}
                 onChange={(option) => {
                   const maxConcurrentShardRequests = getMaxConcurrenShardRequestOrDefault(
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx
index 7b23c3940ee..bdfa47550ef 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx
@@ -157,6 +157,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
               Authentication
             </InlineFormLabel>
             <Select
+              menuShouldPortal
               className="width-15"
               value={authTypeOptions.find((opt) => opt.value === credentials.authType)}
               options={authTypeOptions}
@@ -175,6 +176,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                   Azure Cloud
                 </InlineFormLabel>
                 <Select
+                  menuShouldPortal
                   className="width-15"
                   value={azureCloudOptions.find((opt) => opt.value === credentials.azureCloud)}
                   options={azureCloudOptions}
@@ -252,6 +254,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
               <InlineFormLabel className="width-12">Default Subscription</InlineFormLabel>
               <div className="width-25">
                 <Select
+                  menuShouldPortal
                   value={
                     credentials.defaultSubscriptionId
                       ? subscriptions.find((opt) => opt.value === credentials.defaultSubscriptionId)
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/InsightsAnalyticsEditor/index.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/InsightsAnalyticsEditor/index.tsx
index 0312f701f31..274595e3f49 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/InsightsAnalyticsEditor/index.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/InsightsAnalyticsEditor/index.tsx
@@ -28,6 +28,7 @@ const InsightsAnalyticsEditor: React.FC<InsightsAnalyticsEditorProps> = ({ query
 
       <Field label="Format as">
         <Select
+          menuShouldPortal
           inputId="azure-monitor-logs-workspaces-field"
           value={findOption(FORMAT_OPTIONS, query.insightsAnalytics?.resultFormat)}
           disabled={true}
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/FormatAsField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/FormatAsField.tsx
index 4f3d8427213..ae5c8d0a969 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/FormatAsField.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/FormatAsField.tsx
@@ -34,6 +34,7 @@ const FormatAsField: React.FC<AzureQueryEditorFieldProps> = ({ query, variableOp
   return (
     <Field label="Format as">
       <Select
+        menuShouldPortal
         inputId="azure-monitor-logs-workspaces-field"
         value={findOption(FORMAT_OPTIONS, query.azureLogAnalytics?.resultFormat)}
         onChange={handleChange}
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/AggregationField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/AggregationField.tsx
index 75b1fbfdbdf..3823ca7f2bb 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/AggregationField.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/AggregationField.tsx
@@ -43,6 +43,7 @@ const AggregationField: React.FC<AggregationFieldProps> = ({
   return (
     <Field label="Aggregation">
       <Select
+        menuShouldPortal
         inputId="azure-monitor-metrics-aggregation-field"
         value={findOption(aggregationOptions, query.azureMonitor?.aggregation)}
         onChange={handleChange}
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/DimensionFields.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/DimensionFields.tsx
index 5cac2881f1f..d2147be4a5e 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/DimensionFields.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/DimensionFields.tsx
@@ -67,6 +67,7 @@ const DimensionFields: React.FC<DimensionFieldsProps> = ({ query, dimensionOptio
         {dimensionFilters.map((filter, index) => (
           <HorizontalGroup key={index} spacing="xs">
             <Select
+              menuShouldPortal
               placeholder="Field"
               value={findOption(dimensionOptions, filter.dimension)}
               options={dimensionOptions}
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNameField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNameField.tsx
index 7243ce8e025..976ca709a88 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNameField.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNameField.tsx
@@ -60,6 +60,7 @@ const MetricName: React.FC<AzureQueryEditorFieldProps> = ({
   return (
     <Field label="Metric">
       <Select
+        menuShouldPortal
         inputId="azure-monitor-metrics-metric-field"
         value={findOption(metricNames, query.azureMonitor?.metricName)}
         onChange={handleChange}
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNamespaceField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNamespaceField.tsx
index fc136f0d8f5..744d25dc157 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNamespaceField.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNamespaceField.tsx
@@ -72,6 +72,7 @@ const MetricNamespaceField: React.FC<AzureQueryEditorFieldProps> = ({
   return (
     <Field label="Metric namespace">
       <Select
+        menuShouldPortal
         inputId="azure-monitor-metrics-metric-namespace-field"
         value={findOption(metricNamespaces, query.azureMonitor?.metricNamespace)}
         onChange={handleChange}
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceGroupsField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceGroupsField.tsx
index b67966885b6..86ce8b6ac14 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceGroupsField.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceGroupsField.tsx
@@ -61,6 +61,7 @@ const ResourceGroupsField: React.FC<AzureQueryEditorFieldProps> = ({
   return (
     <Field label="Resource group">
       <Select
+        menuShouldPortal
         inputId="azure-monitor-metrics-resource-group-field"
         value={findOption(resourceGroups, query.azureMonitor?.resourceGroup)}
         onChange={handleChange}
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceNameField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceNameField.tsx
index 9e950dd21aa..0b488a84157 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceNameField.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceNameField.tsx
@@ -60,6 +60,7 @@ const ResourceNameField: React.FC<AzureQueryEditorFieldProps> = ({
   return (
     <Field label="Resource name">
       <Select
+        menuShouldPortal
         inputId="azure-monitor-metrics-resource-name-field"
         value={selectedResourceNameValue}
         onChange={handleChange}
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceTypeField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceTypeField.tsx
index d1936e36199..76a93004d33 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceTypeField.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceTypeField.tsx
@@ -60,6 +60,7 @@ const NamespaceField: React.FC<AzureQueryEditorFieldProps> = ({
     <Field label="Resource type">
       {/* It's expected that the label reads Resource type but the property is metricDefinition */}
       <Select
+        menuShouldPortal
         inputId="azure-monitor-metrics-resource-type-field"
         value={findOption(namespaces, query.azureMonitor?.metricDefinition)}
         onChange={handleChange}
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/TimeGrainField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/TimeGrainField.tsx
index fe4a73e57cf..b5eebed21bf 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/TimeGrainField.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/TimeGrainField.tsx
@@ -57,6 +57,7 @@ const TimeGrainField: React.FC<TimeGrainFieldProps> = ({
   return (
     <Field label="Time grain">
       <Select
+        menuShouldPortal
         inputId="azure-monitor-metrics-time-grain-field"
         value={findOption(timeGrainOptions, query.azureMonitor?.timeGrain)}
         onChange={handleChange}
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryTypeField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryTypeField.tsx
index a31aa9a8c3c..1b82582abf1 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryTypeField.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryTypeField.tsx
@@ -44,6 +44,7 @@ const QueryTypeField: React.FC<QueryTypeFieldProps> = ({ query, onQueryChange })
   return (
     <Field label="Service">
       <Select
+        menuShouldPortal
         inputId="azure-monitor-query-type-field"
         value={findOption(queryTypes, query.queryType)}
         options={queryTypes}
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/SubscriptionField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/SubscriptionField.tsx
index 27fe4f126b6..c173a13ce6c 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/SubscriptionField.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/SubscriptionField.tsx
@@ -100,6 +100,7 @@ const SubscriptionField: React.FC<SubscriptionFieldProps> = ({
   return multiSelect ? (
     <Field label="Subscriptions">
       <MultiSelect
+        menuShouldPortal
         isClearable
         value={findOptions(subscriptions, query.subscriptions)}
         inputId="azure-monitor-subscriptions-field"
@@ -111,6 +112,7 @@ const SubscriptionField: React.FC<SubscriptionFieldProps> = ({
   ) : (
     <Field label="Subscription">
       <Select
+        menuShouldPortal
         value={findOption(subscriptions, query.subscription)}
         inputId="azure-monitor-subscriptions-field"
         onChange={handleChange}
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AzureCredentialsForm.test.tsx.snap b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AzureCredentialsForm.test.tsx.snap
index 12ea8b30e5a..4bf5b932f13 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AzureCredentialsForm.test.tsx.snap
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AzureCredentialsForm.test.tsx.snap
@@ -36,6 +36,7 @@ exports[`Render should disable azure monitor secret input 1`] = `
         isMulti={false}
         isSearchable={true}
         maxMenuHeight={300}
+        menuShouldPortal={true}
         onChange={[Function]}
         openMenuOnFocus={false}
         options={
@@ -181,6 +182,7 @@ exports[`Render should disable azure monitor secret input 1`] = `
           isMulti={false}
           isSearchable={true}
           maxMenuHeight={300}
+          menuShouldPortal={true}
           onChange={[Function]}
           openMenuOnFocus={false}
           options={Array []}
@@ -249,6 +251,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
         isMulti={false}
         isSearchable={true}
         maxMenuHeight={300}
+        menuShouldPortal={true}
         onChange={[Function]}
         openMenuOnFocus={false}
         options={
@@ -384,6 +387,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
           isMulti={false}
           isSearchable={true}
           maxMenuHeight={300}
+          menuShouldPortal={true}
           onChange={[Function]}
           openMenuOnFocus={false}
           options={Array []}
@@ -452,6 +456,7 @@ exports[`Render should render component 1`] = `
         isMulti={false}
         isSearchable={true}
         maxMenuHeight={300}
+        menuShouldPortal={true}
         onChange={[Function]}
         openMenuOnFocus={false}
         options={
@@ -587,6 +592,7 @@ exports[`Render should render component 1`] = `
           isMulti={false}
           isSearchable={true}
           maxMenuHeight={300}
+          menuShouldPortal={true}
           onChange={[Function]}
           openMenuOnFocus={false}
           options={Array []}
diff --git a/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx
index ab71638c92e..39e0d5a0821 100644
--- a/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx
@@ -71,6 +71,7 @@ export default function AnnotationQueryEditor({ query, onChange }: Props) {
     <FieldSet className={styles.container}>
       <Field label="Filter by">
         <Select
+          menuShouldPortal
           inputId="grafana-annotations__filter-by"
           options={annotationTypes}
           value={type}
@@ -79,6 +80,7 @@ export default function AnnotationQueryEditor({ query, onChange }: Props) {
       </Field>
       <Field label="Max limit">
         <Select
+          menuShouldPortal
           inputId="grafana-annotations__limit"
           width={16}
           options={limitOptions}
diff --git a/public/app/plugins/datasource/grafana/components/QueryEditor.tsx b/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
index 2772cb01f2b..74e3229010a 100644
--- a/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
@@ -192,6 +192,7 @@ export class QueryEditor extends PureComponent<Props, State> {
         <div className="gf-form">
           <InlineField label="Channel" grow={true} labelWidth={labelWidth}>
             <Select
+              menuShouldPortal
               options={channels}
               value={currentChannel || ''}
               onChange={this.onChannelChange}
@@ -208,6 +209,7 @@ export class QueryEditor extends PureComponent<Props, State> {
           <div className="gf-form">
             <InlineField label="Fields" grow={true} labelWidth={labelWidth}>
               <Select
+                menuShouldPortal
                 options={fields}
                 value={filter?.fields || []}
                 onChange={this.onFieldNamesChange}
@@ -249,6 +251,7 @@ export class QueryEditor extends PureComponent<Props, State> {
         <div className="gf-form">
           <InlineField label="Query type" grow={true} labelWidth={labelWidth}>
             <Select
+              menuShouldPortal
               options={this.queryTypes}
               value={this.queryTypes.find((v) => v.value === query.queryType) || this.queryTypes[0]}
               onChange={this.onQueryTypeChange}
diff --git a/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx
index ca75f03c12e..e0cf7288c1d 100644
--- a/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx
@@ -74,6 +74,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
                 Version
               </InlineFormLabel>
               <Select
+                menuShouldPortal
                 value={currentVersion}
                 options={graphiteVersions}
                 width={8}
@@ -85,6 +86,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
             <div className="gf-form">
               <InlineFormLabel tooltip={this.renderTypeHelp}>Type</InlineFormLabel>
               <Select
+                menuShouldPortal
                 options={graphiteTypes}
                 value={graphiteTypes.find((type) => type.value === options.jsonData.graphiteType)}
                 width={8}
diff --git a/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx b/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx
index 6baed92653d..6a7ae6ded1b 100644
--- a/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx
@@ -215,6 +215,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
               HTTP Method
             </InlineFormLabel>
             <Select
+              menuShouldPortal
               className="width-10"
               value={httpModes.find((httpMode) => httpMode.value === options.jsonData.httpMode)}
               options={httpModes}
@@ -257,6 +258,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
           <div className="gf-form-inline">
             <div className="gf-form">
               <Select
+                menuShouldPortal
                 className="width-30"
                 value={options.jsonData.version === InfluxVersion.Flux ? versions[1] : versions[0]}
                 options={versions}
diff --git a/public/app/plugins/datasource/influxdb/components/RawInfluxQLEditor.tsx b/public/app/plugins/datasource/influxdb/components/RawInfluxQLEditor.tsx
index 1752af528ee..e47f32c5d62 100644
--- a/public/app/plugins/datasource/influxdb/components/RawInfluxQLEditor.tsx
+++ b/public/app/plugins/datasource/influxdb/components/RawInfluxQLEditor.tsx
@@ -45,6 +45,7 @@ export const RawInfluxQLEditor = ({ query, onChange, onRunQuery }: Props): JSX.E
       <HorizontalGroup>
         <InlineFormLabel htmlFor={selectElementId}>Format as</InlineFormLabel>
         <Select
+          menuShouldPortal
           inputId={selectElementId}
           onChange={(v) => {
             onChange({ ...query, resultFormat: v.value });
diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx b/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx
index b7d125eca77..d18fe860681 100644
--- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx
+++ b/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx
@@ -76,6 +76,7 @@ const SelReload = ({ loadOptions, allowCustomValue, onChange, onClose }: SelRelo
   return (
     <div className={selectClass}>
       <AsyncSelect
+        menuShouldPortal
         formatCreateLabel={formatCreateLabel}
         defaultOptions
         autoFocus
@@ -106,6 +107,7 @@ const SelSingleLoad = ({ loadOptions, allowCustomValue, onChange, onClose }: Sel
   return (
     <div className={selectClass}>
       <Select
+        menuShouldPortal
         isLoading={loadState.loading}
         formatCreateLabel={formatCreateLabel}
         autoFocus
diff --git a/public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap b/public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap
index 9e99a364bfe..4459a535e26 100644
--- a/public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap
@@ -43,6 +43,7 @@ exports[`Render should disable basic auth password input 1`] = `
           isMulti={false}
           isSearchable={true}
           maxMenuHeight={300}
+          menuShouldPortal={true}
           onChange={[Function]}
           openMenuOnFocus={false}
           options={
@@ -227,6 +228,7 @@ exports[`Render should disable basic auth password input 1`] = `
           isMulti={false}
           isSearchable={true}
           maxMenuHeight={300}
+          menuShouldPortal={true}
           onChange={[Function]}
           openMenuOnFocus={false}
           options={
@@ -340,6 +342,7 @@ exports[`Render should hide basic auth fields when switch off 1`] = `
           isMulti={false}
           isSearchable={true}
           maxMenuHeight={300}
+          menuShouldPortal={true}
           onChange={[Function]}
           openMenuOnFocus={false}
           options={
@@ -524,6 +527,7 @@ exports[`Render should hide basic auth fields when switch off 1`] = `
           isMulti={false}
           isSearchable={true}
           maxMenuHeight={300}
+          menuShouldPortal={true}
           onChange={[Function]}
           openMenuOnFocus={false}
           options={
@@ -637,6 +641,7 @@ exports[`Render should hide white listed cookies input when browser access chose
           isMulti={false}
           isSearchable={true}
           maxMenuHeight={300}
+          menuShouldPortal={true}
           onChange={[Function]}
           openMenuOnFocus={false}
           options={
@@ -821,6 +826,7 @@ exports[`Render should hide white listed cookies input when browser access chose
           isMulti={false}
           isSearchable={true}
           maxMenuHeight={300}
+          menuShouldPortal={true}
           onChange={[Function]}
           openMenuOnFocus={false}
           options={
@@ -934,6 +940,7 @@ exports[`Render should render component 1`] = `
           isMulti={false}
           isSearchable={true}
           maxMenuHeight={300}
+          menuShouldPortal={true}
           onChange={[Function]}
           openMenuOnFocus={false}
           options={
@@ -1118,6 +1125,7 @@ exports[`Render should render component 1`] = `
           isMulti={false}
           isSearchable={true}
           maxMenuHeight={300}
+          menuShouldPortal={true}
           onChange={[Function]}
           openMenuOnFocus={false}
           options={
diff --git a/public/app/plugins/datasource/jaeger/components/SearchForm.tsx b/public/app/plugins/datasource/jaeger/components/SearchForm.tsx
index 7cb510292a8..cf57c8cd549 100644
--- a/public/app/plugins/datasource/jaeger/components/SearchForm.tsx
+++ b/public/app/plugins/datasource/jaeger/components/SearchForm.tsx
@@ -53,6 +53,7 @@ export function SearchForm({ datasource, query, onChange }: Props) {
       <InlineFieldRow>
         <InlineField label="Service" labelWidth={21} grow>
           <Select
+            menuShouldPortal
             options={serviceOptions}
             value={serviceOptions?.find((v) => v.value === query.service) || null}
             onChange={(v) => {
@@ -69,6 +70,7 @@ export function SearchForm({ datasource, query, onChange }: Props) {
       <InlineFieldRow>
         <InlineField label="Operation" labelWidth={21} grow disabled={!query.service}>
           <Select
+            menuShouldPortal
             options={operationOptions}
             value={operationOptions?.find((v) => v.value === query.operation) || null}
             onChange={(v) =>
diff --git a/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx b/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx
index 0457fe63db7..c6a0e5b125c 100644
--- a/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx
+++ b/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx
@@ -29,6 +29,7 @@ export const OpenTsdbDetails = (props: Props) => {
       <div className="gf-form">
         <InlineFormLabel width={7}>Version</InlineFormLabel>
         <Select
+          menuShouldPortal
           options={tsdbVersions}
           value={tsdbVersions.find((version) => version.value === value.jsonData.tsdbVersion) ?? tsdbVersions[0]}
           onChange={onSelectChangeHandler('tsdbVersion', value, onChange)}
@@ -37,6 +38,7 @@ export const OpenTsdbDetails = (props: Props) => {
       <div className="gf-form">
         <InlineFormLabel width={7}>Resolution</InlineFormLabel>
         <Select
+          menuShouldPortal
           options={tsdbResolutions}
           value={
             tsdbResolutions.find((resolution) => resolution.value === value.jsonData.tsdbResolution) ??
diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
index 7075368260f..39443895823 100644
--- a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
@@ -163,6 +163,7 @@ export class PromQueryEditor extends PureComponent<PromQueryEditorProps, State>
             <div className="gf-form">
               <div className="gf-form-label">Resolution</div>
               <Select
+                menuShouldPortal
                 isSearchable={false}
                 options={INTERVAL_FACTOR_OPTIONS}
                 onChange={this.onIntervalFactorChange}
@@ -173,6 +174,7 @@ export class PromQueryEditor extends PureComponent<PromQueryEditorProps, State>
             <div className="gf-form">
               <div className="gf-form-label width-7">Format</div>
               <Select
+                menuShouldPortal
                 width={16}
                 isSearchable={false}
                 options={FORMAT_OPTIONS}
diff --git a/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap b/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
index 6d98b49353d..8ccf16787ac 100644
--- a/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
@@ -66,6 +66,7 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
         </div>
         <Select
           isSearchable={false}
+          menuShouldPortal={true}
           onChange={[Function]}
           options={
             Array [
@@ -113,6 +114,7 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
         </div>
         <Select
           isSearchable={false}
+          menuShouldPortal={true}
           onChange={[Function]}
           options={
             Array [
diff --git a/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx b/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx
index f13afc23c0a..14db924aa29 100644
--- a/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx
+++ b/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx
@@ -155,6 +155,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
               Authentication
             </InlineFormLabel>
             <Select
+              menuShouldPortal
               className="width-15"
               value={authTypeOptions.find((opt) => opt.value === credentials.authType)}
               options={authTypeOptions}
@@ -172,6 +173,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                   Azure Cloud
                 </InlineFormLabel>
                 <Select
+                  menuShouldPortal
                   className="width-15"
                   value={azureCloudOptions.find((opt) => opt.value === credentials.azureCloud)}
                   options={azureCloudOptions}
@@ -244,6 +246,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
               <InlineFormLabel className="width-12">Default Subscription</InlineFormLabel>
               <div className="width-25">
                 <Select
+                  menuShouldPortal
                   value={
                     credentials.defaultSubscriptionId
                       ? subscriptions.find((opt) => opt.value === credentials.defaultSubscriptionId)
diff --git a/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx b/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx
index fab61014329..648ae92931e 100644
--- a/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx
+++ b/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx
@@ -75,6 +75,7 @@ export const PromSettings = (props: Props) => {
             HTTP Method
           </InlineFormLabel>
           <Select
+            menuShouldPortal
             options={httpOptions}
             value={httpOptions.find((o) => o.value === options.jsonData.httpMethod)}
             onChange={onChangeHandler('httpMethod', options, onOptionsChange)}
diff --git a/public/app/plugins/datasource/prometheus/configuration/__snapshots__/AzureCredentialsForm.test.tsx.snap b/public/app/plugins/datasource/prometheus/configuration/__snapshots__/AzureCredentialsForm.test.tsx.snap
index 12ea8b30e5a..4bf5b932f13 100644
--- a/public/app/plugins/datasource/prometheus/configuration/__snapshots__/AzureCredentialsForm.test.tsx.snap
+++ b/public/app/plugins/datasource/prometheus/configuration/__snapshots__/AzureCredentialsForm.test.tsx.snap
@@ -36,6 +36,7 @@ exports[`Render should disable azure monitor secret input 1`] = `
         isMulti={false}
         isSearchable={true}
         maxMenuHeight={300}
+        menuShouldPortal={true}
         onChange={[Function]}
         openMenuOnFocus={false}
         options={
@@ -181,6 +182,7 @@ exports[`Render should disable azure monitor secret input 1`] = `
           isMulti={false}
           isSearchable={true}
           maxMenuHeight={300}
+          menuShouldPortal={true}
           onChange={[Function]}
           openMenuOnFocus={false}
           options={Array []}
@@ -249,6 +251,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
         isMulti={false}
         isSearchable={true}
         maxMenuHeight={300}
+        menuShouldPortal={true}
         onChange={[Function]}
         openMenuOnFocus={false}
         options={
@@ -384,6 +387,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
           isMulti={false}
           isSearchable={true}
           maxMenuHeight={300}
+          menuShouldPortal={true}
           onChange={[Function]}
           openMenuOnFocus={false}
           options={Array []}
@@ -452,6 +456,7 @@ exports[`Render should render component 1`] = `
         isMulti={false}
         isSearchable={true}
         maxMenuHeight={300}
+        menuShouldPortal={true}
         onChange={[Function]}
         openMenuOnFocus={false}
         options={
@@ -587,6 +592,7 @@ exports[`Render should render component 1`] = `
           isMulti={false}
           isSearchable={true}
           maxMenuHeight={300}
+          menuShouldPortal={true}
           onChange={[Function]}
           openMenuOnFocus={false}
           options={Array []}
diff --git a/public/app/plugins/datasource/testdata/QueryEditor.tsx b/public/app/plugins/datasource/testdata/QueryEditor.tsx
index 36a6cf22ba7..4b52f2b2c4e 100644
--- a/public/app/plugins/datasource/testdata/QueryEditor.tsx
+++ b/public/app/plugins/datasource/testdata/QueryEditor.tsx
@@ -170,6 +170,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props)
       <InlineFieldRow aria-label={selectors.scenarioSelectContainer}>
         <InlineField labelWidth={14} label="Scenario">
           <Select
+            menuShouldPortal
             options={options}
             value={options.find((item) => item.value === query.scenarioId)}
             onChange={onScenarioChange}
@@ -256,6 +257,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props)
       {scenarioId === 'grafana_api' && (
         <InlineField labelWidth={14} label="Endpoint">
           <Select
+            menuShouldPortal
             options={endpoints}
             onChange={onEndPointChange}
             width={32}
diff --git a/public/app/plugins/datasource/testdata/components/CSVFileEditor.tsx b/public/app/plugins/datasource/testdata/components/CSVFileEditor.tsx
index 5c3e356812e..9b30f7dbac1 100644
--- a/public/app/plugins/datasource/testdata/components/CSVFileEditor.tsx
+++ b/public/app/plugins/datasource/testdata/components/CSVFileEditor.tsx
@@ -21,6 +21,7 @@ export const CSVFileEditor = ({ onChange, query }: EditorProps) => {
     <InlineFieldRow>
       <InlineField label="File" labelWidth={14}>
         <Select
+          menuShouldPortal
           width={32}
           onChange={onChangeFileName}
           placeholder="Select csv file"
diff --git a/public/app/plugins/datasource/testdata/components/GrafanaLiveEditor.tsx b/public/app/plugins/datasource/testdata/components/GrafanaLiveEditor.tsx
index a0c150e2b22..a37252f6baa 100644
--- a/public/app/plugins/datasource/testdata/components/GrafanaLiveEditor.tsx
+++ b/public/app/plugins/datasource/testdata/components/GrafanaLiveEditor.tsx
@@ -30,6 +30,7 @@ export const GrafanaLiveEditor = ({ onChange, query }: EditorProps) => {
     <InlineFieldRow>
       <InlineField label="Channel" labelWidth={14}>
         <Select
+          menuShouldPortal
           width={32}
           onChange={onChannelChange}
           placeholder="Select channel"
diff --git a/public/app/plugins/datasource/testdata/components/StreamingClientEditor.tsx b/public/app/plugins/datasource/testdata/components/StreamingClientEditor.tsx
index 3d6e9e6c9d6..c503648d764 100644
--- a/public/app/plugins/datasource/testdata/components/StreamingClientEditor.tsx
+++ b/public/app/plugins/datasource/testdata/components/StreamingClientEditor.tsx
@@ -31,7 +31,7 @@ export const StreamingClientEditor = ({ onChange, query }: EditorProps) => {
   return (
     <InlineFieldRow>
       <InlineField label="Type" labelWidth={14}>
-        <Select width={32} onChange={onSelectChange} defaultValue={types[0]} options={types} />
+        <Select menuShouldPortal width={32} onChange={onSelectChange} defaultValue={types[0]} options={types} />
       </InlineField>
       {query?.stream?.type === 'signal' &&
         streamingClientFields.map(({ label, id, min, step, placeholder }) => {
diff --git a/public/app/plugins/datasource/testdata/components/USAQueryEditor.tsx b/public/app/plugins/datasource/testdata/components/USAQueryEditor.tsx
index d546ed8e3e6..db733072c5e 100644
--- a/public/app/plugins/datasource/testdata/components/USAQueryEditor.tsx
+++ b/public/app/plugins/datasource/testdata/components/USAQueryEditor.tsx
@@ -14,6 +14,7 @@ export function USAQueryEditor({ query, onChange }: Props) {
       <InlineFieldRow>
         <InlineField labelWidth={14} label="Mode">
           <Select
+            menuShouldPortal
             options={usaQueryModes}
             onChange={(v) => {
               onChange({ ...query, mode: v.value });
@@ -35,6 +36,7 @@ export function USAQueryEditor({ query, onChange }: Props) {
       <InlineFieldRow>
         <InlineField labelWidth={14} label="Fields">
           <Select
+            menuShouldPortal
             options={fieldNames}
             onChange={(vals: SelectableValue[]) => {
               onChange({ ...query, fields: vals.map((v) => v.value) });
@@ -47,6 +49,7 @@ export function USAQueryEditor({ query, onChange }: Props) {
         </InlineField>
         <InlineField label="States" grow>
           <Select
+            menuShouldPortal
             options={stateNames}
             onChange={(vals: SelectableValue[]) => {
               onChange({ ...query, states: vals.map((v) => v.value) });
diff --git a/public/app/plugins/panel/geomap/dims/editors/ColorDimensionEditor.tsx b/public/app/plugins/panel/geomap/dims/editors/ColorDimensionEditor.tsx
index 70fb94d4758..25f11359eaf 100644
--- a/public/app/plugins/panel/geomap/dims/editors/ColorDimensionEditor.tsx
+++ b/public/app/plugins/panel/geomap/dims/editors/ColorDimensionEditor.tsx
@@ -57,6 +57,7 @@ export const ColorDimensionEditor: FC<StandardEditorProps<ColorDimensionConfig,
     <>
       <div className={styles.container}>
         <Select
+          menuShouldPortal
           value={selectedOption}
           options={selectOptions}
           onChange={onSelectChange}
diff --git a/public/app/plugins/panel/geomap/dims/editors/ScaleDimensionEditor.tsx b/public/app/plugins/panel/geomap/dims/editors/ScaleDimensionEditor.tsx
index a7a249a6d97..53cfc79539e 100644
--- a/public/app/plugins/panel/geomap/dims/editors/ScaleDimensionEditor.tsx
+++ b/public/app/plugins/panel/geomap/dims/editors/ScaleDimensionEditor.tsx
@@ -93,6 +93,7 @@ export const ScaleDimensionEditor: FC<StandardEditorProps<ScaleDimensionConfig,
     <>
       <div>
         <Select
+          menuShouldPortal
           value={selectedOption}
           options={selectOptions}
           onChange={onSelectChange}
diff --git a/public/app/plugins/panel/geomap/editor/GazetteerPathEditor.tsx b/public/app/plugins/panel/geomap/editor/GazetteerPathEditor.tsx
index 4164d027fc0..f047105ed42 100644
--- a/public/app/plugins/panel/geomap/editor/GazetteerPathEditor.tsx
+++ b/public/app/plugins/panel/geomap/editor/GazetteerPathEditor.tsx
@@ -45,6 +45,7 @@ export const GazetteerPathEditor: FC<StandardEditorProps<string, any, any>> = ({
   return (
     <>
       <Select
+        menuShouldPortal
         value={current}
         options={options}
         onChange={(v) => onChange(v.value)}
diff --git a/public/app/plugins/panel/geomap/editor/LayerEditor.tsx b/public/app/plugins/panel/geomap/editor/LayerEditor.tsx
index 5446380d6b8..97c4994dbdf 100644
--- a/public/app/plugins/panel/geomap/editor/LayerEditor.tsx
+++ b/public/app/plugins/panel/geomap/editor/LayerEditor.tsx
@@ -164,6 +164,7 @@ export const LayerEditor: FC<LayerEditorProps> = ({ options, onChange, data, fil
   return (
     <div>
       <Select
+        menuShouldPortal
         options={layerTypes.options}
         value={layerTypes.current}
         onChange={(v) => {
diff --git a/public/app/plugins/panel/geomap/editor/MapViewEditor.tsx b/public/app/plugins/panel/geomap/editor/MapViewEditor.tsx
index 0e7c29996c3..f40f7639705 100644
--- a/public/app/plugins/panel/geomap/editor/MapViewEditor.tsx
+++ b/public/app/plugins/panel/geomap/editor/MapViewEditor.tsx
@@ -62,7 +62,7 @@ export const MapViewEditor: FC<StandardEditorProps<MapViewConfig, any, GeomapPan
     <>
       <InlineFieldRow>
         <InlineField label="View" labelWidth={labelWidth} grow={true}>
-          <Select options={views.options} value={views.current} onChange={onSelectView} />
+          <Select menuShouldPortal options={views.options} value={views.current} onChange={onSelectView} />
         </InlineField>
       </InlineFieldRow>
       {value?.id === MapCenterID.Coordinates && (
diff --git a/public/app/plugins/panel/live/LiveChannelEditor.tsx b/public/app/plugins/panel/live/LiveChannelEditor.tsx
index 2da40180272..b347248df00 100644
--- a/public/app/plugins/panel/live/LiveChannelEditor.tsx
+++ b/public/app/plugins/panel/live/LiveChannelEditor.tsx
@@ -107,13 +107,19 @@ export class LiveChannelEditor extends PureComponent<Props, State> {
         <div>
           <div className={style.dropWrap}>
             <Label>Scope</Label>
-            <Select options={scopes} value={scopes.find((s) => s.value === scope)} onChange={this.onScopeChanged} />
+            <Select
+              menuShouldPortal
+              options={scopes}
+              value={scopes.find((s) => s.value === scope)}
+              onChange={this.onScopeChanged}
+            />
           </div>
 
           {scope && (
             <div className={style.dropWrap}>
               <Label>Namespace</Label>
               <Select
+                menuShouldPortal
                 options={namespaces}
                 value={
                   namespaces.find((s) => s.value === namespace) ??
@@ -130,6 +136,7 @@ export class LiveChannelEditor extends PureComponent<Props, State> {
             <div className={style.dropWrap}>
               <Label>Path</Label>
               <Select
+                menuShouldPortal
                 options={paths}
                 value={findPathOption(paths, path)}
                 onChange={this.onPathChanged}
diff --git a/public/app/plugins/panel/table/TablePanel.tsx b/public/app/plugins/panel/table/TablePanel.tsx
index 9e0623998e9..120fe04039b 100644
--- a/public/app/plugins/panel/table/TablePanel.tsx
+++ b/public/app/plugins/panel/table/TablePanel.tsx
@@ -126,7 +126,12 @@ export class TablePanel extends Component<Props> {
         <div className={tableStyles.wrapper}>
           {this.renderTable(data.series[currentIndex], width, height - inputHeight - padding)}
           <div className={tableStyles.selectWrapper}>
-            <Select options={names} value={names[currentIndex]} onChange={this.onChangeTableSelection} />
+            <Select
+              menuShouldPortal
+              options={names}
+              value={names[currentIndex]}
+              onChange={this.onChangeTableSelection}
+            />
           </div>
         </div>
       );
diff --git a/public/app/plugins/panel/timeseries/FillBelowToEditor.tsx b/public/app/plugins/panel/timeseries/FillBelowToEditor.tsx
index feb7372fabc..a8ca720f466 100644
--- a/public/app/plugins/panel/timeseries/FillBelowToEditor.tsx
+++ b/public/app/plugins/panel/timeseries/FillBelowToEditor.tsx
@@ -37,6 +37,7 @@ export const FillBellowToEditor: React.FC<FieldOverrideEditorProps<string, any>>
 
   return (
     <Select
+      menuShouldPortal
       options={names}
       value={current}
       onChange={(v) => {
diff --git a/public/app/plugins/panel/timeseries/LineStyleEditor.tsx b/public/app/plugins/panel/timeseries/LineStyleEditor.tsx
index 93d2536228e..bc5448fef07 100644
--- a/public/app/plugins/panel/timeseries/LineStyleEditor.tsx
+++ b/public/app/plugins/panel/timeseries/LineStyleEditor.tsx
@@ -89,6 +89,7 @@ export const LineStyleEditor: React.FC<FieldOverrideEditorProps<LineStyle, any>>
       {value?.fill && value?.fill !== 'solid' && (
         <>
           <Select
+            menuShouldPortal
             allowCustomValue={true}
             options={options}
             value={current}
diff --git a/public/app/plugins/panel/timeseries/ThresholdsStyleEditor.tsx b/public/app/plugins/panel/timeseries/ThresholdsStyleEditor.tsx
index 0017187120d..560b053268f 100644
--- a/public/app/plugins/panel/timeseries/ThresholdsStyleEditor.tsx
+++ b/public/app/plugins/panel/timeseries/ThresholdsStyleEditor.tsx
@@ -13,5 +13,5 @@ export const ThresholdsStyleEditor: React.FC<
     },
     [onChange]
   );
-  return <Select value={value.mode} options={item.settings.options} onChange={onChangeCb} />;
+  return <Select menuShouldPortal value={value.mode} options={item.settings.options} onChange={onChangeCb} />;
 };
diff --git a/public/app/plugins/panel/xychart/XYDimsEditor.tsx b/public/app/plugins/panel/xychart/XYDimsEditor.tsx
index a43234fc641..a002fe57685 100644
--- a/public/app/plugins/panel/xychart/XYDimsEditor.tsx
+++ b/public/app/plugins/panel/xychart/XYDimsEditor.tsx
@@ -90,6 +90,7 @@ export const XYDimsEditor: FC<StandardEditorProps<XYDimensionConfig, any, Option
   return (
     <div>
       <Select
+        menuShouldPortal
         options={frameNames}
         value={frameNames.find((v) => v.value === value?.frame) ?? frameNames[0]}
         onChange={(v) => {
@@ -102,6 +103,7 @@ export const XYDimsEditor: FC<StandardEditorProps<XYDimensionConfig, any, Option
       <br />
       <Label>X Field</Label>
       <Select
+        menuShouldPortal
         options={info.numberFields}
         value={info.xAxis}
         onChange={(v) => {