Material-ui: [SelectField] Add keyboard support

[luisrudge]

• Material-UI: v0.15.0-beta.2
• React: any
• Browser: any

Steps to reproduce:

• go to http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select
• click the <select> element
• type the first letter of an option ('s', for example)
• the Saab option will be selected
• go to http://www.material-ui.com/v0.15.0-beta.2/#/components/select-field
• click the first SelectField component
• type the first letter of an option ('e', for example)
• nothing happens, but the Every Night option should be selected

[mbrookes]

@luisrudge please can you make the title more succinct, and put the detail in the description.

Also, did the issue template not come up for you? What browser are you using?

[luisrudge]

I updated the title and the issue with the relevant info

[nathanmarks]

@luisrudge I can't even tab focus the component (at least in the docs example).

[luisrudge]

Thanks @nathanmarks for the help. You're right, there's no keyboard support

[piglovesyou]

This keyboard support is only necessary in SelectField, not in DropDownMenu and Menu. Is this correct?

[luisrudge]

I think so

On Fri, May 6, 2016 at 10:01 PM -0700, "piglovesyou" [email protected] wrote:

This keyboard support is only necessary in SelectField, not in DropDownMenu and Menu. Is this correct?

---

You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
https://github.com/callemall/material-ui/issues/4181#issuecomment-217607975

[mbrookes]

@piglovesyou Ideally, from an accessibility standpoint, every component should be keyboard navigable.

[piglovesyou]

@luisrudge @mbrookes Thanks. Because I didn't disagree with @mbrookes I only changed Menu.js. Hope it helps.

[luisrudge]

This is great stuff! Thanks @piglovesyou and @mbrookes <3

[kidwm]

Is it possible to also bundle a hidden <select> to support "required" and "form" attributes?

[piglovesyou]

Hi @kidwm , could you be more specific?

[kidwm]

@piglovesyou

<form onInvalid={func}>
<SelectField required>
</SelectField>
</form>

It should trigger onInvalid event if SelectField's value is null.

[piglovesyou]

Oh you're talking about this. But even then I can't figure out why it relates to this issue. I believe this issue only deals with a behavior when you hit a key while <SelectField /> has focus. Can you explain why?

[kidwm]

@piglovesyou They are all about the <select> behavior, I'll file another issue for "required" attribute.

[piglovesyou]

That makes more sense. Thank you for explaining that.

[matthewoates]

old duplicate here: https://github.com/callemall/material-ui/issues/1544

[matthewoates]

Also, how is SelectField different from DropDownMenu? Looks like the same component implemented twice to me.

[luisrudge]

Thanks @mbrookes! :tada:
Any ETA on the next release?

[mbrookes]

Not planned, but we should probably get a 0.15.1 out soon enough.

[Sigmus]

Using 0.15.4 and not working for me. Working for anyone?

[piglovesyou]

Sad I'll check

[nathanmarks]

It's being completely reworked on the next branch.

[jbhatab]

@nathanmarks whats the status on this? I tried pulling from master but it didn't quite fix it. I just have a really form heavy app.

[felipenmoura]

so...one year later, using material-ui-next ... the only way I can allow the user to type a letter and scroll the options to the right position, is by using the native select?
I couldn't find any other issue discussing this, but for me, this is of utter importance, as it directly affects the user interaction and even accessibility.

[piglovesyou]

• Now the main branch seems to be v1-beta that doesn't include my change
• master and v1-beta are quite different, so cherry-picking my code toward v1-beta will need some effort

@mbrookes @nathanmarks Could you point out the current status? It seems like this issue is closed although it's not solved.