[Paper] Adding PaperComponent property makes the Autocomplete scroll to top on change

[faunti]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

If I have set a custom PaperComponent and I scroll down the list and select an item, I am scrolled back to top automatically.

Expected behavior 🤔

If I have set a custom PaperComponent and I scroll down the list and select an item, I should stay scrolled down to that item.

Steps to reproduce 🕹

Steps:

1. Go to demo: https://stackblitz.com/edit/react-vr2zm1?file=demo.js
2. Scroll down to 1957's 12 angry men (or any other item down the list)

Result: You get scrolled to the top of the list.

Context 🔦

If I want to use custom Paper Component to set custom class name or elevation, I get degraded experience. I am currently using a workaround to set the class name through the classes property.

Your environment 🌎

No response

[passpe]

I have the same problem, are there any updates?

[rossmuego]

I am also experiencing this behaviour, an update/workaround would be greatly appreciated.

[ZeeshanTamboli]

Yes it's a bug that passing a custom Paper component is causing the issue to scroll on top.

However, if you just want to have props applied to Paper component, instead of passing a custom component you can use componentsProps.paper slot directly to pass the Paper props.

See: https://stackblitz.com/edit/react-vr2zm1-zkbquf?file=demo.js

This alternative solution fixes the issue.

[nick-kolesnikov]

@ZeeshanTamboli nice to have this workaround, but it's not enough unfortunately. componentsProps allows to pass props only to paper and clearIndicator but the issue is reproducible with custom PopperComponent too

[ZeeshanTamboli]

I deep dived into it. This issue happens because the custom paper component is defined inline within the PaperComponent prop, so it causes a rerender since React thinks it's a complete different component. While rerendering the autocomplete is scrolled to the top.

You can fix the issue by memoizing the Paper component or defining it outside the main component. See the following Stackblitz for the second option: https://stackblitz.com/edit/react-vr2zm1-xhhkth?file=demo.js

I'm closing this issue since there is no action for us.

[osv93]

This issue is still happening, are there any updates?

[nimishkr28]

How to add custom prop to the CustomPaperComponent so that it doesn't auto scrolls to the top?

[ZeeshanTamboli]

How to add custom prop to the CustomPaperComponent so that it doesn't auto scrolls to the top?

@nimishkr28 You can provide those props to the slotProps.paper prop in the Autocomplete component.