Material-ui: [Select] Placeholder should be displayed

Created on 23 Oct 2017 · 6Comments · Source: mui-org/material-ui

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Select should display the placeholder, like a regular input.

Current Behavior

Using the placeholder property on Select has no visible effect. I looked into the code and it seems this property is being forwarded to the underlying <input hidden /> element, hence it does not appear.

https://codesandbox.io/s/ol4pln434q

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.16 |
| React | 16.0.0 |
| browser | Chrome 62.0.3202.62 |

Select docs enhancement

Source

viotti

👍7

Most helpful comment

I'd like to tackle this as i need it for an app and am currently falling back to defining preselected disabled MenuItems instead :)

sakulstra on 27 Oct 2017

👍4

All 6 comments

This feature is currently not supported.

oliviertassinari on 23 Oct 2017

I'd like to tackle this as i need it for an app and am currently falling back to defining preselected disabled MenuItems instead :)

sakulstra on 27 Oct 2017

👍4

@oliviertassinari Is there a special reason why this is not supported ? i'd like to take a shoot at it unless i missing something

AdamGorkoz on 18 Feb 2018

@AdamGorkoz I believe it's a documentation issue. The "placeholder" has no place with a select component.

oliviertassinari on 18 Feb 2018

@AdamGorkoz this is how you could tackle this with the current implementation https://codesandbox.io/s/wqq7059oq8 .
We should probably add something along these lines to the documentation, but I didn't find time and tbh forgot about it - feel free to do so :)

sakulstra on 18 Feb 2018

Instead of a hidden input, just have a label styled to be placeholder text that is layered on top of he input or whatever you need a placeholder for. Input hidden is not a good thing for accessibility/screen readers. Also hidden inputs are considered security risks if some cases.

You are already using an SVG to mimic the select arrow. You could add this label to be part of select or input. Input placeholders don't work in IE11, so you are going to see this same issue there also. Ran into this in another framework several years ago. I am not sure how the input is related to select or how this is currently implemented, but if select is extending or based on input having the label on input may work and fix select also.

See this article, https://css-tricks.com/float-labels-css/