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 https://github.com/google/material-design-lite/issues/854#issuecomment-120027938 .

[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 https://github.com/google/material-design-lite/issues/854#issuecomment-120624940 .

[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

https://github.com/langan/material-design-lite/commit/ddd169c77ad132590ce5d52f4cf90d8383ab349b

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

[pierr]

:+1:

[kushdilip]

I have create a prototype of dropdown by combining mdl-textfield and mdl-button. Selecting a value is not working for now. I am working on it. http://codepen.io/kushdilip/pen/bVbXgJ?editors=110

[ArthurStapassoli1987]

@etcpe9 very good man!!!

Thanks!!

[ghost]

Excuses like "we have no guidance on how selects should look" fall short of the getmdl.io statement "Material Design Lite lets you add a Material Design look and feel to your websites.".

Polymer and other web-based material design libraries are pushing ahead.

https://elements.polymer-project.org/elements/paper-dropdown-menu?active=paper-dropdown-menu&view=demo:demo/index.html

[brunoksato]

+1

[mebibou]

For those who are interested, I developed a plugin and added it to bower:

mdl-selectfield

[davidpelayo]

@mebibou could you add a codepen, plunker or similar, or simply an example page within your project?

Post edit: @Garbee understood and agreed. Actually it was what I did after comenting.

[Garbee]

@davidpelayo Please bring up issues with @mebibou's package on their repository. Comments on this PR should be constructive towards making sure it is ready to be accepted, not discussion about other projects.

[ksugiarto]

Hi guys, not trying to over pushing this issue, just wondering how the progress from Dev. I already look upon @mebibou selectfield, it's awesome and probably I would use that for the moment, still it would be awesome if this feature added soon :)

[samccone]

Hey @ksugiarto I am not sure if anyone has started work on one yet, are you or @mebibou interested in opening up a PR? That would be super awesome! Thanks for the interest

[ksugiarto]

hi @samccone after scrolling upside down, I read that actually @langan already fork and work on some cool code, would be awesome if this code could be fully develop.

[mebibou]

@ksugiarto @samccone yes the one I did is a standard html select, so that on mobile phones it uses the standard select behaviour and not some dropdown that would appear on the screen, which it would be harder to use and control the look. Therefore it probably doesn't go along the material design specs (if they are any for this component), which is why I don't plan on making a PR, but I'm open to suggestions :)

[Garbee]

A PR is already open for one method of doing select inputs. However, there are a few methods we could take here. Before anything is accepted in we need to think through the accessibility. I need to sit down and run through tests of different methods and see how accessible they are, especially on mobile. This is going to take quite a bit of time, which is why no more movement has been made on the open PR. Finding the time to sit down and dig into a11y is difficult with everything else I have going on.

tl;dr

Don't expect it in 1.1. A11y is extremely important and we need to make sure it is done well.

[ksugiarto]

hi @Garbee wow, thanks so much. Me personally not trying to pushing something to you guys, and I know for sure make a simple mvp feature would be easy for you guys, but for make it sure really work in every kind of conditions, that one big thing.

But the things that I believe people here also want you guys to know that we are so enthusiastic for this feature :D thanks in advance

[zetta83]

that tell about it https://github.com/MEYVN-digital/mdl-selectfield ?

[upmhh20]

Hey @Garbee @samccone
is this still relevant for adding pull request?

from what i understand there's a method for mobile and one for desktop?

i have some basic react prototype http://codepen.io/upmhh20/pen/vLyZZQ

[Garbee]

There currently is one PR for this (addressing that in a moment.)

Essentially, due to select being a manipulation on top of a form object we are most likely going to end up handling this among the core team (probably myself) after 2.x is released.

We want to make sure that whatever is included is not violating accessibility. Which every current proposal does do since they all depend upon our menu system which is not fully accessible yet.

If someone can build a proposal (post 2.x since doing it against 1.x is not going to be a good use of effort) that doesn't break accessibility, then they are free to go for it otherwise.

The main difference from the spec is, on mobile we are going to try and use the native select handlers. Then on desktops use the MD menu style.

[mchiareli]

@Garbee what do u mean for violating accessibility in this case? And had you thought about creating a "lab/extras" repository for components that can not be included in mdl right now, but may be in the future?

[Garbee]

Violating a11y, I mean we shouldn't introduce a component that reduces a11y lower than the default element. i.e. Our menu component currently is not as accessible as a select element is, so it is a violation using that.

No other repo is going to get made at the moment for experiments. I'm working on planning breaking things out, but that is for another future major due to the increased workload and management of such a task.

Doing a purely experimental area is a bad idea. People then start using it in production as if it is sound and then complain when things break or users have problems. Also, support expectations. No matter how many times we say things aren't supported yet, people will still ask for help. Best avoid that situation entirely.

It would also mean, putting direct effort into doing something when right now we have nothing towards it. Which distracts from effort going into other areas. Overall, wasting effort when the full workload can be put in at once and the components can be given the attention they deserve.

This component is going to get worked on. Immediately however, we have many other bigger priorities that are affecting developers which the sooner we get solved the better. That way focusing on new components is a simpler effort as well once those changes are in.

[gpgekko]

Just pointing out that besides the usage in the example on the menu page, the actual element shown is documented as a dropdown button on the buttons documentation page: http://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons

[Garbee]

@gpgekko That is a peripheral thing that isn't really relevant. The spec is not worded for web tech, so they are just naming things whatever. We'd replace the select with a button/menu combination. But, it has more work involved then just drop in and replace. Also, doing things like that for developers is only going to be done as absolutely required in 2.x. So that makes rolling out an implementation more difficult.

[mchiareli]

@Garbee is there a roadmap for MDL releases?

[Garbee]

Just the milestones on GH. However, they are not comprehensive and the dates are just picked out of air pretty much.

[franckevva]

Look at getmdl-select - that's the thing you really need! It provides a fast way to make select input with native Material design lite menu style. https://github.com/CreativeIT/getmdl-select

example page

hope it'll help you

[Etabat]

@franckevva great suggestion! Unfortunately I am using the element and also using AngularJS ng-options to create a cascading dropdown. In fact, Angular-Material currently doesn't handle ng-options in which is why I went with MDL. Do you know of any way of creating a similar material affect on the element? Thanks!

surma commented 8 years ago

@Etabat You’ll probably have more success with these kinds of questions on StackOverflow using the material-design-lite tag. We try to keep the GH issue tracker for core issues only.

dgrubelic commented 8 years ago

Hi there.. Just wanted to ask if anyone is currently tackling with this component? Any progress on having this one soon in "close-to-production" PR?

dgrubelic commented 8 years ago

https://github.com/dgrubelic/material-design-lite/tree/selectfield

Since no one is actually doing anything on this component (if anyone is, please correct me), i started doing it on my own.

Here you can see early-development version of SelectField component. As usual, any comments, suggestions and issues, please write them down in my repo since this is my vision of select input component.

davidaparicio commented 8 years ago

:+1: @franckevva thanks a lot for your implementation!! Waiting for the official version now :)

Next

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[surma]

@Etabat You’ll probably have more success with these kinds of questions on StackOverflow using the material-design-lite tag. We try to keep the GH issue tracker for core issues only.

[dgrubelic]

Hi there.. Just wanted to ask if anyone is currently tackling with this component? Any progress on having this one soon in "close-to-production" PR?

[dgrubelic]

https://github.com/dgrubelic/material-design-lite/tree/selectfield

Since no one is actually doing anything on this component (if anyone is, please correct me), i started doing it on my own.

Here you can see early-development version of SelectField component. As usual, any comments, suggestions and issues, please write them down in my repo since this is my vision of select input component.

[davidaparicio]

:+1: @franckevva thanks a lot for your implementation!! Waiting for the official version now :)