Select with lazy load scrolls back to previous item when new items are added

[Chris3y]

Current behaviour

You can recreate this on the infinite scroll example:
https://carbon.sage.com/?path=/story/design-system-select--with-infinite-scroll

When scrolling to the bottom, the Select uses lazy load to add new pages of options.

Scrolling position is maintained as each new set is added.

However if you actually choose and option first (e.g.) one of the initial ones, such as "Black" and then scroll to the bottom [using the mouse], the list will "jump" back to the selected item with every new page load.

Expected behaviour

I would expect it to consistently maintain scroll position and not jump the length of the list with every new page load.

CodeSandbox or Storybook URL

https://carbon.sage.com/?path=/story/design-system-select--with-infinite-scroll

Suggested Solution

Suggestion would be to maintain the same behaviour as when the Select has no item selected initially.

Carbon Version

77.12.0

What browsers are you seeing the problem on?

Chrome

What Operating System are you seeing the problem on?

Windows

Anything else we should know?

Confidentiality

• I confirm there is no confidential or commercially sensitive information included.

[jamime]

FE-4244

[carbonci]

🎉 This issue has been resolved in version 81.2.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀