diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index 57bf124bf6..305c81e29f 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -42,6 +42,7 @@ import { withStyles } from '@material-ui/core/styles'; import { useEntityPresentation } from '../../apis'; import { catalogReactTranslationRef } from '../../translation'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; +import { PopperProps } from '@material-ui/core/Popper'; /** @public */ export type CatalogReactEntityOwnerPickerClassKey = 'input'; @@ -92,6 +93,10 @@ export type EntityOwnerPickerProps = { mode?: 'owners-only' | 'all'; }; +const Popper = React.memo(function Popper({ children }: PopperProps) { + return
{children as ReactNode}
; +}); + function RenderOptionLabel(props: { entity: Entity; isSelected: boolean }) { const classes = useStyles(); const isGroup = props.entity.kind.toLocaleLowerCase('en-US') === 'group'; @@ -188,9 +193,7 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => { {t('entityOwnerPicker.title')} ( -
{popperProps.children as ReactNode}
- )} + PopperComponent={Popper} multiple disableCloseOnSelect loading={loading}