feat(mat-select): The selected option shows at the bottom when opening. Make this position configurable.

[Bschitter]

Feature Description

Version: Angular Material 17.0.2

Description

When I have a mat-select with many options, the selected value will always be at the bottom when opening the mat-select.

Suggestion

Make where the selected option shows configurable with values like bottom (default) | middle | top as shown in the screenshot below.

Use Case

For some use cases, it might be better to have the selected option at the top or in the middle, so the previous resp. the previous and next values can be seen.
E.g. the select list is sorted and I'm iterating through the select (for whatever reason) then I always have to scroll when I want to select the next item.

[andrewseguin]

Can you add a reproduction of this issue? I don't understand why the selection is always at the bottom. That doesn't sound right

[Bschitter]

You can take the examples from the docs, e.g. Select with reset option from https://material.angular.io/components/select/examples

Then select a state where you need to scroll down (from Colorado onwards), e.g. Maine.
Then open it again and you will see that Maine is at the bottom.

Happens in Firefox 122.0 and Chrome 121.0.6167.139

[nora-alphbrk]

I'd also be happy to see this implemented. For us, the use case is that we are building a time selection with start and end times, and we are aiming at providing the same user experience as the Google Calendar where a value is preselected and the selected value is then displayed in the middle of the option list. Like so:

Screen.Recording.2024-05-10.at.11.54.40.mov

I tried to achieve this with scrollIntoView for the selected option in the select's opened handler, but we are not happy with this solution because it creates a jumping behavior as the "scroll" is clearly visible. It looks odd. (We tried both scrolling behaviors instant and smooth and none of those are acceptable for us, unfortunately.)

A config option as suggested by @Bschitter would be great so that the position is set immediately when the select is opened (as visible in the Google Calendar recording).