diff --git a/.changeset/pretty-spoons-knock.md b/.changeset/pretty-spoons-knock.md
new file mode 100644
index 0000000000..5eddce54d9
--- /dev/null
+++ b/.changeset/pretty-spoons-knock.md
@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+'@backstage/plugin-catalog-react': patch
+---
+
+Prevents Autocomplete dropdown from overlapping sidebar on hovering it
diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx
index d3c76a183d..4bd9f100f9 100644
--- a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx
+++ b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx
@@ -20,7 +20,7 @@ import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Autocomplete from '@material-ui/lab/Autocomplete';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, ReactNode } from 'react';
 import { useApi } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/esm/useAsync';
 import { catalogApiRef } from '../../api';
@@ -152,6 +152,9 @@ export function EntityAutocompletePicker<
       <Typography className={classes.label} variant="button" component="label">
         {label}
         <Autocomplete<string, true>
+          PopperComponent={popperProps => (
+            <div {...popperProps}>{popperProps.children as ReactNode}</div>
+          )}
           multiple
           disableCloseOnSelect
           options={availableOptions}
diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
index 88ff3945d1..c6b738d18b 100644
--- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
@@ -30,7 +30,7 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Autocomplete from '@material-ui/lab/Autocomplete';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, ReactNode } from 'react';
 import { useEntityList } from '../../hooks/useEntityListProvider';
 import { EntityOwnerFilter } from '../../filters';
 import { useDebouncedEffect } from '@react-hookz/web';
@@ -178,6 +178,9 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => {
       <Typography className={classes.label} variant="button" component="label">
         Owner
         <Autocomplete
+          PopperComponent={popperProps => (
+            <div {...popperProps}>{popperProps.children as ReactNode}</div>
+          )}
           multiple
           disableCloseOnSelect
           loading={loading}
diff --git a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
index f7de5d72b1..9995aba936 100644
--- a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
@@ -24,7 +24,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import React, { useState } from 'react';
+import React, { useState, ReactNode } from 'react';
 import { useEntityList } from '../../hooks';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 
@@ -73,6 +73,9 @@ export const EntityProcessingStatusPicker = () => {
       <Typography className={classes.label} variant="button" component="label">
         Processing Status
         <Autocomplete<string, true>
+          PopperComponent={popperProps => (
+            <div {...popperProps}>{popperProps.children as ReactNode}</div>
+          )}
           multiple
           disableCloseOnSelect
           options={availableAdvancedItems}
diff --git a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx
index 24f8a21109..f2505ec148 100644
--- a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx
+++ b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import capitalize from 'lodash/capitalize';
 import { Progress } from '@backstage/core-components';
 import Box from '@material-ui/core/Box';
@@ -78,6 +78,9 @@ export const TemplateCategoryPicker = () => {
         Categories
       </Typography>
       <Autocomplete<string, true>
+        PopperComponent={popperProps => (
+          <div {...popperProps}>{popperProps.children as ReactNode}</div>
+        )}
         multiple
         id="categories-picker"
         options={availableTypes}