-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Autocomplete] Provide an all in solution #13863
Comments
I have mixed feeling about it. I'm adding the |
+1 for it. Material-UI is great providing building blocks, but we would like that, once all basics components are "done", start with more complete components. We switch daily from Material-UI to Vuetify, for different projects, and we feel more productive with Vuetify: autocomplete is on of those cases. It's already built in. But we could give more: rating, timeline, treeview, combobox, sparkline calendar, etc.. Not only new components, but the existing ones have more features built-in, giving a great DX. |
@amesas This is a great feedback. If you can share specific points where you feel more productive, it would help a lot prioritizing our effort. |
We'd like to suggest that offering a Select component without auto-completion/filtering functionality doesn't make much sense today as any modern user expects that functionality. We also find that implementing this functionality with Material-UI is more work than it should be, especially when there are so many other frameworks that offer it out of the box (Ant Design, Vueify, among others). Add to this (while I'm at it :)) the need to occasionally wrap a select component in a redux-form field and the work really multiplies when using Material-UI. For what it's worth, we like react-select's approach, and think the community would gladly accept an opinionated Material UI SelectField based on it. In a nutshell, it would be nice if we could create a basic (redux-form-compatible) Material-UI SelectField as easily we do with native react-select component:
All that said, Material UI is still our preferred framework and will be for the foreseeable future. Thank you for your valuable contribution to this space... A rather long-winded +1 |
@oliviertassinari , I will add more detailed info, but it's on @SladeRun14's boat. M-UI is getting enough mature to start adding/improving some components, that i think can be considered basic nowadays. Ratings, Tree views, Timelines, Fileupload, feature discovery, sparklines, pickers, combined pickers, calendar... Material Design is not only "how to paint a component", but it defines UX, and those more complex components could help devs get this Material Design UX. Right now when you start using M-UI and go beyond some basic forms, you start looking for tons of external packages, and trying to guess how to use them with M-UI. I'm not talking about having a DevExtreme React Grid into M-UI, but some components feel pretty basic like in this case: select/autocomplete (Why we need an external component?). M-UI table should be able to filter/search without adding an external package, etc. |
I want to add my 2 cents as developer we are using material-ui with react-select for several different cases and i want to point to edge cases which are important for us
<Select
autoComplete="off"
textFieldProps={{
autoComplete: "off",
inputProps: {
autoComplete: "off",
},
}}
/> this should be documented beeter especially looking at next case
import React from "react";
import {components} from "react-select";
function Input(props) {
return (
<components.Input {...props} autoComplete="disabled" />
);
}
export default Input; you probably can add this to docs as gotchas
looking at all this you probably can reimplement all components with material components. this also will remove all unused dependencies from bundle of end user. we absolutely dont need |
@oliviertassinari I want to add something here. It's not just for convenience' sake, but also for the stability and ability to move fast of the framework/library (whatever it's called). Take this issue as an example #16364. Material-UI's If this becomes a possibility, count me in. I want to help with this, also I might need some guidance. And correct me if I am wrong. Cheers! 👍 |
@dreamsinspace This issue is one of the most important one open right now on the project. I used to believe that providing different customization options to users would be the best approach: https://material-ui.com/components/autocomplete/. However, after reviewing the user survey answer we have run at the beginning of the year. I'm no longer sure about that. People seem to really value the one-stop component store proposition of Material-UI. I'm also amazed by how much react-select grows while being hard to customize (I have tried in our demos), having a none negligible bundle size cost, over 1k opened issues, numerous accessibility issues and not feature very rich. So going forward, I think that the best option is to ship our own components with minimal dependencies. We could provide one/multiple components that support different use cases:
I haven't looked that the dependencies of the benchmarked solutions, but I would guess most do it from scratch (to be verified). Any help would be highly appreciated! (We could even consider paying $ to fund such effort.) |
I happened to come across this blog post today (while searching for something completely unrelated to this issue). The component in question might prove a useful reference for accessibility (and code?). It is 10.8KB with only one runtime I dependency - preact. |
@mbrookes Never knew there's a blog that actually mentions that kind of information on gov.uk! 🤣 |
Or we can cut the middleman and start with WAI-ARIA which they did as well:
If we look at their implementation first we might as well just use their component and apply our styling. No need to waste time re-implementing it and calling it our own. See also internal doc about a11y implementation in material-ui. |
ARIA isn't the be-all and end-all of accessibility. They didn't just just consult the specs, they consulted accessibility experts. |
No need to argue against claims nobody made.
No but they put it first and those experts probably contributed to the WAI-ARIA docs. |
@oliviertassinari I made a start on
And apply it
|
@oliviertassinari Can u re-assign this to me? I'm pretty much done with prototyping and will open a PR in about 2 days. |
@dreamsinspace Sure :), can we have a brainstorming session at some point, maybe on Gitter? I think that the sooner the better. I think that it's an important and great opportunity to help our users. |
@dreamsinspace did you open a PR? If yes, could you post the link here? Thanks! |
@Toub @oliviertassinari Hey folks. Sorry for the delay. I have the documentation and the component ready, just really trying to figure out how to do tests and type definitions. I'm kind of lost since MUI uses a lot of testing utilities and complex types under the hood. If possible, @oliviertassinari it would be nice if you could guide me through this. I tried DMing you on Spectrum, but didn't get a reply :p |
@dreamsinspace It might be better to create a Draft PR with the work you have already done, that way people can see it and it will make it a lot easier for everyone to help. |
Oops, sorry, I had disabled the notifications on Spectrum side. (I wasn't very happy with the way it was turning out: a split of the community. I think that we should consolidate it on StackOverflow, at least for generic question/answer threads.) |
@dreamsinspace, I agree with @joshwooding, a draft PR is the best place to discuss and contribute to your work in progress! |
@Toub @oliviertassinari @joshwooding Alright folks. Will make a draft PR if I get some free time tomorrow. Cheers :) |
@Toub @oliviertassinari @joshwooding PR created. Please give it a look 😄 |
A lot of additional work needs to be done, in order to provide material-ui styling to default react-select components. Can we have a wrapper select component with m-ui look and feel which implements react-select underneath.
Expected Behavior 🤔
options
to populate options, similar to react-select.Current Behavior 😯
N/A
Examples 🌈
Context 🔦
The text was updated successfully, but these errors were encountered: