Request: Implement a Searchable Select

[GeorgeWL]

I think it would be nice to have a Select with Input component, I've seen it used in many Google Material products for making it easier to filter large lists.

Something like this little library: https://selectize.github.io/selectize.js/

I'm by no means expecting you to dictate the behaviour of the select, in fact I'd rather you didn't so that one could do so themselves, or at least add an optional onChange prop override.

[codypearce]

Yeah under the hood the Select component uses the TextField component https://github.com/codypearce/material-bread/blob/master/src/Components/Select/Select.js#L87, but it needs some rewriting to be able to type inside it and activate the dropdown.

I think there's two parts to that:

1. A prop to distinguish between allowing the user to type in the textfield and only allowing them to click to activate the dropdown.
2. Better support for chips in TextFields, like here https://material.io/design/components/chips.html#

What do you think?

[GeorgeWL]

I agree with that yeah.

Possibly have the prop be boolean and something like filterable ?

Another possibility is to allow it to have children, but that could lead to behaviours against the material ethos.

[codypearce]

Well I like the idea of of prebuilt functionality that matches material, but with enough escape hatches to make something more custom.

So maybe add that filterable prop, but allow for the user to pass in a custom TextField component that gets rendered instead of the prebuilt one, for example renderTextField prop. This would also allow the user to use other packages like https://github.com/benhurott/react-native-masked-text while still taking advantage of the Select element.

[GeorgeWL]

Yeah that sounds great

[Emuentes]

What about downshift? Might not need too much refactoring to be cross platform. I'm not sure tho, haven't looked into it.

https://github.com/downshift-js/downshift