[material-ui][Select] Scroll inside select input

[mantegnous]

Summary

i would like to scroll inside the input my selected values for now i see only ... but i cant see more because i can't select the text like an textfield and scroll it horizontally with my mouse

this could be a feature, especially if select is disabled

Examples

for example if i have long text selected, or more than one option selected, i want scroll them and don't see just "..."

Motivation

UX friendly, like a user i would like to see my selections, without open the dropdown

Search keywords: select input

[DiegoAndai]

Thanks for the report @mantegnous.

What do you think about this @zanivan? I'm not sure if it would be a great UX, seems to me that the best UX is for users to expand the select options to see which ones are selected. Adding a scroll might be difficult to interact with.

How is this pattern implemented in other libraries?

[mantegnous]

@DiegoAndai the case is for disabled input, to scroll and watch what is inside, when is enable you click and see the options in the menu.

if im in a form that i can't edit, and i choosed a lot of options and the field is disabled.. i wanna se them by scrolling, like a textinput, there is possible, i select the text and i scroll with mouse

[zanivan]

@DiegoAndai in the ARIA guide the Combobox—similar to our Select—presents a horizontal scroll. This is likely because this component's structure is composed by an input widget that has an associated popup. The Combobox input field then, presents the same horizontal scroll from the input. Currently, we have the horizontal scroll in the Material UI TextFields, so if we choose to follow the same idea of ARIA guide, we should also have the same scroll in Select input field.

TextField from Material UI

https://github.com/user-attachments/assets/896bc923-c3e0-4978-b791-76712c205ecb

Combobox from ARIA guide

https://github.com/user-attachments/assets/8ca5ad82-2c32-4e16-8e4b-5e21473291c1

However, there are some other UX workarounds if the label is too long @mantegnous. You can try truncating it with an ellipsis and showing the full label on hover or focus, or, you can also display the full label in a tooltip when the user hovers over or navigates to the truncated label using the keyboard to keep it accessible and clear. If space allows, you could display the label on multiple lines instead of truncating.

That said, for this specific case, I don't think you should have interaction on disabled components, though.

[DiegoAndai]

I think we can implement it the same way it works on the TextField, that makes sense to me 👌🏼

If you're on board @zanivan we can accept this feature request and mark as ready to take.

My only question is, should we keep the ellipsis that we currently have on the Select?

[zanivan]

My only question is, should we keep the ellipsis that we currently have on the Select?

Could we turn this into a prop? I think in the end, the default behavior should be the scroll, but we should also allow users to use the ellipsis if they want, in an easy way. We could make it like the multiline prop for TextField, something like:

  <Select
    labelId="demo-simple-select-label"
    ellipsis // a boolean prop that if true add the ellipsis to Select
    id="demo-simple-select"
    value={age}
    label="Age"
    onChange={handleChange}
  >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
  </Select>

[DiegoAndai]

@zanivan changing the default behavior would be a breaking change, so that would need to happen on v7. We'll start working on that in the upcoming months, so I'll add it to that milestone.