Select Input

[Bamertos]

Hello

I just begin with Material design lite, and it's awesome. But i miss something et i didn't find it in the documentation.

I'm working on a form, and i didn't find a way to have good select input. (I find text/number input, checkbox, radio button, ...)

Someone can help me?

Thank you

Thomas

[Garbee]

@Bamertos Select, is just standard HTML select elements. Right now we have no guidance on how selects should look, other than chip systems which is a planned addition and we could build off from that.

We should get in touch with the MD team on how to proceed in the best way.

On the note of simply needing more form components, please file specific issues and use-cases. The more actionable and specific items we have to work on the better.

[Rom4eg]

@Garbee What about this? It's look like a Select input

Textfield dropdown

[Garbee]

Oh nice catch. It is placed under Menus... Ok, good enough for me. I'll bring it up when we start planning new component additions. One thing is, we could also want to support chips under selects for an advanced view for dropdowns (since they could be interchangeable specs for the task.)

EDIT: And leaving guidance task just as a reminder to verify with the MD team that this is a valid use-case. Looks like it should be, but better safe than sorry when implementing.

[adammhaile]

@Rom4eg Where did you find that example with the address input? I've been trying to figure out how to do a dropdown as well and that would work fine for me, but I cannot find the example that shows that interface and how to create it.

[Garbee]

@adammhaile That is from the Material Design specification. MDL has yet to implement that functionality. For now it will need to be a custom implementation.

[adammhaile]

Ahhh... OK. That's unfortunate. Thanks for clarifying. I'll just have to
wait on MDL for now :)

On Thu, Jul 9, 2015 at 11:14 AM, Jonathan Garbee notifications@github.com
wrote:

@adammhaile https://github.com/adammhaile That is from the Material
Design specification. MDL has yet to implement that functionality. For now
it will need to be a custom implementation.

—
Reply to this email directly or view it on GitHub
#854 (comment)
.

[mmis1000]

I thought it is bad to break the default select implement from the browser.
Since browsers implement it in multi ways.
On mobile, they implement it as overlay.(dropdown doesn't really fit to a mobile device.)
On desktop, they implement it as dropdown menu.
The HTML spec doesn't actually tell us how to implement it.
Just like ...etc.
The tag is defined by its meaning, not look.

If we must implement it, then we need to implement all types of layout of every browsers for the best accessibility.
It would be very complex.

[Garbee]

We can style desktop systems a bit and leave mobile to act as it normally would.

[adammhaile]

Makes sense to me. Select is used a lot and it would be a shame to have it
missing.

On Sat, Jul 11, 2015 at 10:10 AM, Jonathan Garbee notifications@github.com
wrote:

We can style desktop systems a bit and leave mobile to act as it normally
would.

—
Reply to this email directly or view it on GitHub
#854 (comment)
.

[mmis1000]

@Garbee
http://jsbin.com/salutaroku/1/edit?html,css,output
You means, just change the look but don't touch its function on mobile?

[Garbee]

@mmis1000 Yes, it should be doable. What is the point behind the jsbin?

[mmis1000]

just a small example for customized look select element

[hebbet]

that is an accepted bug, please stop adding "+1" to it.

hit the subscribe button in the sidebar if you want to track progress.

[pudgereyem]

Hey guys, is anyone working on this?
I could help out. Do you guys have a chat or something?

In the meantime I made my own "css only"-version (simple) http://codepen.io/pudgereyem/pen/PqBxQx/
If you want a Javascript-version that styles the whole thing, I would recommend http://materializecss.com/forms.html or http://semantic-ui.com/modules/dropdown.html

Btw, it seems like Angular Material have implemented this already; https://material.angularjs.org/latest/#/demo/material.components.select

[etcpe9]

i just clone Textfield js and css code into a new one and it works in chrome but not perfect.
waiting for the official dropdown component.
http://codepen.io/etcpe9/pen/PqyOye

[langan]

I've started work on adding this to MDL, should I make a pull request?

[surma]

@langan Awesome! I’d be happy to look over your pull request :)

[langan]

Ive pushed my code to a branch on my fork

langan@ddd169c

It's my first attempt at anything on this project so let me know if it looks ok and if its worth continuing (would be happy to work on it further and add an example component page)

[surma]

@langan Don’t be afraid to open up a proper PR. That we’ll have an isolated thread for discussion and review

[ciampo]

More examples can be found in Polymer and Angular-Material

[TomGallon]

Hello !

+1

It would have been really usefull to have it.
Thanks

[dgrubelic]

This is for my cloned repo. It uses gulp internally.

For one project i'm working on, i created another special repo where i "cook" my own MDL build. That build includes datepicker, selectfield, some custom color definitions, etc. But this is esentially clone of original MDL repo using all MDL infrastructure.

[leifoolsen]

I'll come back with some feedback later this evening. Made a branch here: https://github.com/leifoolsen/mdl-ext/tree/evaluate/mdl-select
Think I can use that for testing.

[leifoolsen]

I've tested a bit, although somewhat superficial yet. Here is a brief summary.

1: The popup list does not respect the browser viewport.

As you can observe from the screenshot the list is clipped - it should adjust "upwards" to show the list unclipped. This is the behavior of the select box.

2: No unit tests. Tests should be written in paralell with developing of the component.

3: Not "light weight". Too much code for a simple selcet element. No more code/functionality than is implemented for the MDL textfield should be required for this.

4: Dependency to the Material Icons library, which should be optional. You can use CSS to draw the down arrow.

5: Visual design of the components follows Material Design standard as far as I can see - but I have hesitation with how you treat markup in the script.

Now I hope I did not seem all too rude in my feedback - I try to be constructive :-)

[dgrubelic]

Thanks for testing it.

1. Not yet implemented. Still working on that. As i said, this version is still under heavy development.
2. Also, not yet written. :)
3. Look at my date picker component. That is really heavy component. The idea was to create component that will look exactly the same (by MD specs) in every browser and every device. When you think of accessibility. That being said, you have to fully implement all accessibility concepts manually - thus the big component. But i think that code could be optimized, no doubt there.
4. Agree, that could be improved to use just CSS. Thanks for that.
5. "hesitation with how you treat markup in the script" - what do you mean by that?

[leifoolsen]

You have duplicated the otions into a lot of divs. In my opinion it's no longer a select element - it's someting else.

[dgrubelic]

Yes, exactly. It is no longer select element - it is component that works on top of select element since each browser has it's own select element styling.

[leifoolsen]

@dgrubelic: I think this is more i line with what you are developing: WAI-ARIA Authoring Practices 1.1, Listbox. If I develop a component myself, I check with this website. Is there a component described here, I get a lot for free with regard to documentation and test cases.

EDIT: ... or the Wai-Aria Combo Box.

[dgrubelic]

And what would be the point here? I actually don't understand you. Are you saying that i'm doing something wrong with this implementation? And if so, why is it wrong?

How would you submit listbox values through form? As far as i can see, all examples i found online are using exactly select element to accomplish this task. The only difference between select element is
unlike standard HTML select elements, may contain images

TBH, I actually no longer find this discussion productive since i'm just getting info that i'm doing something wrong, but not a suggestion how to improve (or totally rewrite) current component state. That being said, I'll remain my focus on current implementation and see what MDL team has to say about my proposal.

[leifoolsen]

I have tried to be constructive in my feedback, but if your perception is different I respect tha.

[alvarotrigo]

+1

[dsxack]

+1

[dgrubelic]

People, please, do not "+1".

This is really not constructive comment as we already know how much this component is needed. Actually, i have no idea on which part do you focus with your "+1". Is it topic and component itself, or some comment...

Also, you can subscribe to this topic, if that is why you're commenting...

[kctang]

Guys, I just want to point out that it is very hard to take MDL as a serious choice for material design based UI toolkit if it does not even provide select/dropdownlist component. Using a standard HTML select within an MDL screen makes the UI look inconsistent/ugly.

Hope you will consider prioritising this for next major version. If not a full-fledge select component, at least an interim solution/guidance...maybe adopting/adapting some of the good work from the guys on this issue.

Thanks! If you agree, please 👍 this post to help bump its priority.

[rebers]

I have no idea how this issue can be open for almost a whole year and there is still no solution. Is this still in active development, apart from the external pull requests? The last commit in any branch seems to be over 1 month old. Without a select component, this is really not working out for anybody really.

[leifoolsen]

... and please, no JS generated elements! It'a a pain to style such stuff; a designer shuld have 100% control of markup. Don't make the Java Server Faces mistakes all over again.

[Garbee]

There are quite a few issues with modifying the styling here. It is a non-trivial issue and finding the best path forward requires a lot of testing and prototype code to churn though. It takes time and everyone has other tasks to work on as well.

Select inputs are a form component, which is extremely high priority for web sites. However, due to it being a form component that means much more care needs to be taken in modifying/replacing it. Whatever we do needs to be fully accessible and align as closely as we can to the MD spec.

Restyling native elements are notoriously difficult and also near impossible to align to MD with just that. So replacing the elements somehow is required (which means JS generated elements.) However, they must built with accessibility in mind which increases the difficulty. And how we handle this on mobile is also undecided.

On mobile, we can either provide the custom design which isn't very accessible for people with vision impairments. So most likely we would want to fall back to the native select UX on mobile devices, which makes things more difficult to get just right.

This problem is far from trivial and will require quite a few days of work from whomever puts forward this work if they do it before I get to it (which I'm planning on after we finalize how we want 2.x components to look.) But, it needs to be fully accessible and align to MD standards which is problematic, especially when the spec currently isn't built for web/desktop usage.

[leifoolsen]

@GabrielGil. To style a select box, as you mention, is no trivial task - especially if one wishes to preserve the semantics. The simplest is perhaps to give it a light MDL overhaul, so that when it acts as a dropdown list it is consistent with MDL text fields. If anyone wants more advanced list boxes, one can create a component for this, but not based on a select element that has limited styling capabilities.

[Garbee]

If we do a simple version that doesn't align we are only going to get repeated complaints that we aren't aligning. 😦

There isn't a way to win here except to put forth the full effort initially to completely align (except where we absolutely shouldn't) and be accessible.

[leifoolsen]

@kctang @devboxr If you just need a simple dropdown select element, you can just pull code from my github: https://github.com/leifoolsen/mdl-ext/tree/master/src/selectfield
Live demo: http://leifoolsen.github.io/mdl-ext/demo/selectfield.html

Some alternatives:
https://github.com/MEYVN-digital/mdl-selectfield
https://github.com/CreativeIT/getmdl-select
https://github.com/mebibou/mdl-selectfield
https://github.com/trentsp/mdl-select

[sgomes]

Superseded by #4475.

[casertap]

Did anyone implemented an input select using mdl?
Something like this: https://reactcommunity.org/react-autocomplete/async-data/
Is there any codepen available?

[qtipet]

Hello all,

I was searching for a component that fulfills all my needs, but I never found that, so I decided to create my own Jquery plugin for this purpose. It has a filter functionality, and supports multiselect, as well as some other minor stuff.

If you still looking for something like this, check it out, and let me know how it worked out for you! :)

Find all here:
https://github.com/qtipet/material-searchselect

Good luck!

[scriptburn]

I made a great mistake using mdl template , Now i have to start over with using a new material template