Comments (5)
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?
from material-ui.
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?
from material-ui.
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>
from material-ui.
@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
from material-ui.
@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.
from material-ui.
Related Issues (20)
- Box modules is broken HOT 1
- Temporary drawer changes content and header width when open in an iframe
- Joy UI: Disabled Link IconButton appearance appears to still be enabled HOT 7
- [joy-ui][Select] Option flickers for multiple and controlled Select
- Material UI 6 CssVarsProvider causes Suspense to reload async components HOT 3
- Can't integrate latest next.js with pages router with MUI
- Microsoft Ribbon Style HOT 3
- [RFC] Change Checkbox padding from 9px to 8px
- [material-ui][Divider] Add aria-orientation
- Accordion's bottom outline disappears when expanded (only in safari)
- [Typography] text color not working in v6 + Pigment CSS HOT 12
- [joy-ui][Select] Alignment problem for listbox of Select HOT 1
- Select with text input not working in your website demo HOT 1
- Cannot run React MUI - TypeError: can't access property "jsx", H is undefined HOT 2
- FocusTrap should not scroll the page HOT 3
- Data Grid Pro Header Not Adjusted with the width of browser. HOT 1
- [docs] expand on sx performance tradeoff HOT 3
- type checking and auto completion stops working when importing from @react-three/fiber HOT 2
- [material-ui][Modal] Bring back transition component in test that fails with React 19
- [material-ui][Switch] Doesn't show initial value when true HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui.