Merge pull request #24903 from JeevaRamanathan/issue_21781

Fix: Autocomplete component overlapping sidebar

.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

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}

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}

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}

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}