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

[mantegnous]

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

[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?

[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?

[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>

[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

Screen.Recording.2024-07-24.at.15.55.45.mov

Combobox from ARIA guide

Screen.Recording.2024-07-24.at.15.57.12.mov

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.