From 5a5bdda6254f058dbaebdc6a53249c25e4c110f6 Mon Sep 17 00:00:00 2001
From: Vincenzo Scamporlino <vincenzos@spotify.com>
Date: Mon, 25 Nov 2024 10:21:35 +0100
Subject: [PATCH 1/3] catalog-react: fix scroll reset

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>
---
 .../components/EntityOwnerPicker/EntityOwnerPicker.tsx   | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

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 <div>{children as ReactNode}</div>;
+});
+
 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) => {
       <Typography className={classes.label} variant="button" component="label">
         {t('entityOwnerPicker.title')}
         <Autocomplete
-          PopperComponent={popperProps => (
-            <div {...popperProps}>{popperProps.children as ReactNode}</div>
-          )}
+          PopperComponent={Popper}
           multiple
           disableCloseOnSelect
           loading={loading}

From d97a2cd4ab14b62e599a7e5b0afaf2628265ceb9 Mon Sep 17 00:00:00 2001
From: Vincenzo Scamporlino <vincenzos@spotify.com>
Date: Mon, 25 Nov 2024 10:23:11 +0100
Subject: [PATCH 2/3] catalog-react: changeset

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>
---
 .changeset/few-pillows-remember.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/few-pillows-remember.md

diff --git a/.changeset/few-pillows-remember.md b/.changeset/few-pillows-remember.md
new file mode 100644
index 0000000000..8f13651a70
--- /dev/null
+++ b/.changeset/few-pillows-remember.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Fixed an issue causing the `EntityOwnerPicker` to reset scrolling when more elements are loaded.

From 8898d8210055dfa4582720a0e50bca83b2ee6cbd Mon Sep 17 00:00:00 2001
From: Vincenzo Scamporlino <vincenzos@spotify.com>
Date: Tue, 26 Nov 2024 16:03:34 +0100
Subject: [PATCH 3/3] catalog-react: remove memoization of Popper

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>
---
 .../components/EntityOwnerPicker/EntityOwnerPicker.tsx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
index 305c81e29f..ecbdae1d63 100644
--- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
@@ -93,10 +93,6 @@ export type EntityOwnerPickerProps = {
   mode?: 'owners-only' | 'all';
 };
 
-const Popper = React.memo(function Popper({ children }: PopperProps) {
-  return <div>{children as ReactNode}</div>;
-});
-
 function RenderOptionLabel(props: { entity: Entity; isSelected: boolean }) {
   const classes = useStyles();
   const isGroup = props.entity.kind.toLocaleLowerCase('en-US') === 'group';
@@ -267,3 +263,7 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => {
     </Box>
   );
 };
+
+function Popper({ children }: PopperProps) {
+  return <div>{children as ReactNode}</div>;
+}