Material-ui: Enable Search in SelectField

[sujilnt]

Problem description

i wanted to create a component in material ui like adding a input searchbox inside a selectfield, Right now I have done using autocomplete but its not giving accepted behaviour .

[nsisodiya]

Let me explain the issue.
We are using SelectField but we want a search field inside SelectField which can be controlled by flag called enableSearch.

This will be useful when item list is very long. Example country dropdown !!

[oliviertassinari]

I'm closing that issue for #1956. It has been resolved with 3 potential solutions. Have a look at the end of the thread.

[lorinkoz]

Hey there!
Sorry, looks like the solutions proposed in #1956 don't match the desired behavior in this thread. Any chance to reopen this?

[kavink]

@oliviertassinari This request does not seem like a multi select one, But for long list allow user to type and filter from select list , So someone does not need to scroll a long list.

[nlicht]

hey, joining @kavink - looking for the same functionality

[kavink]

@nlicht I have started using paypal/downshift instead for now. Unless you can afford to wait for this probably dead issue.

[vladimirivanoviliev]

This should be reopened as currently I don't see straight forward way of achiving it, however it's very common to want to filter the result set.
Edit:
Example of searching inside select lists:
Kendo DropDownList

[oliviertassinari]

@vladimirivanoviliev I believe some people have already been achieving such in the v1-beta.

[nlicht]

@vladimirivanoviliev can you please reference this?
Looking at the v1-beta docs: https://material-ui-next.com/demos/selects/
I can't find this capability

[vladimirivanoviliev]

@oliviertassinari currently I can only see such functionality in the 'Native Select' component (which is having it as the native element supports it) - the regular one still does not have it.

Edit: Also as the v.1 is still in beta It would be nice to see this in the current (0.9xx) version of the components.

[oliviertassinari]

Also as the v.1 is still in beta It would be nice to see this in the current (0.9xx) version of the components.

@vladimirivanoviliev What version are you referring to 0.9xx? We encourage the usage of the v1-beta version for new projects. The v0.x versions are in a legacy mode with low support.

[vladimirivanoviliev]

@oliviertassinari - the version I'm referring to is the current stable one v0.2x (sorry for the typo). The project was started when the v.1 was in early beta (and doesn't work well in our cases) which is why I decided to go with the previous official release. I will upgrade to it when it's released officially as my project is already in production (using betas is not an option for me).

[bityogi]

For people coming to this page looking for a searchable select field, please look into the material-ui AutoComplete component.

[maibono]

@bityogi Autocomplete lets you write anything other than the options.

Use react select ( though) it's not material
https://github.com/JedWatson/react-select

Hope somebody makes a material UI for react select

[semi-sentient]

This looks extremely promising: https://github.com/Sharlaan/material-ui-superselectfield

I have not yet had a chance to implement it, but from looking at the demo it's exactly what folks have been asking for, which is a way to filter a large list and make multiple selections.

[RudmanMario]

Is there any progress here?
Using non material-ui solutions brings a problem with the form validation (I'm using form validation specific for material ui components).

@semi-sentient It looks like that solution is still using 0.x version.

[ninjabunny]

I kinda mash together a TextField Menu + Popper, but it does not have keyboard support. Anyone find a solution that includes the keyboard?

[mvitzthum]

I made a small component you might wanna check out.
https://github.com/DCCS-IT-Business-Solutions/react-searchable-select-mui
Unfortunately there is no arrow-key Support (yet?) :)

[oliviertassinari]

Would #17037 help?

[KeitelDOG]

For people coming to this page looking for a searchable select field, please look into the material-ui AutoComplete component.

The Autocomplete is a very good one that fit my need. However you'll need to install Lab package npm install @material-ui/lab.
Surely I can play around to even load new data while typing. And it does not select anything if you don't click on one or type it correctly. So it's a like a search, except the search input is no inside the list view, but on the input itself

[huang-tianwen]

more than 3 years, still not supported?

[oliviertassinari]

Solved in https://material-ui.com/components/autocomplete/.