Material-ui: [DropDownMenu] [SelectField] onChange not triggered via tab/arrow keys

[vmaudgalya]

I was using the DropDownMenu component for a form and at times I tab through each element and use the arrow keys to select options. However upon pressing the up/down arrow when the DropDownMenu is selected, the onChange event is not being triggered, even though the displayed text is changing.

[vmaudgalya]

The same applies for the SelectField component

[oliviertassinari]

That's definitly something that we should fix.
@subjectix would this be easy? I know that you had some issue with making the new API and the deprecated one work together.

The same applies for the SelectField component

The SelectField is internaly using the DropDownMenu.
We plan to deprecate the DropDownMenu for the SelectField. Does that makes sense for you?

[vmaudgalya]

@oliviertassinari it does make sense, it seemed like the SelectField provided all the functionality of DropDownMenu and more

[alitaheri]

The Component is a mess right now. and we can't really remove anuthing there since we should wait for 0.15.0 ( semver is important :expressionless: ).

About the behavior you are facing. I think it's somehow expected behavior that unless you actually select an item the value shouldn't change up/down keys are line scroll on mouse, they are used to navigate, not select. So I think the bug here, really is the changing label. @oliviertassinari What do you think?

[olmg-mike]

I tried to upgrade to 0.14.0 from 0.13.4 because I was experiencing this same problem. I don't see it in 0.14.0 mainly because I can't use the tab key to focus on the SelectField control anymore to recreate the issue.

[thomasmery]

Hi,

was wondering if I was supposed to be able to Tab > Focus on the SelectField
it does not seem to be working for me

I don't see it working no the examples neither
can someone confirm?

many thnks

[JosephGarrone]

Also having this issue. Anyone got any workarounds at the moment?

[petermikitsh]

Still broken on 0.15.2. @oliviertassinari Would you take a PR for this? I'd like to see this fixed-- accessibility is important!

[oliviertassinari]

@petermikitsh I agree, accessibility is important. If you want to work on this, go ahead 😄 .

[oliviertassinari]

I couldn't reproduce the issue on the latest version (0.17.1). I'm assuming that the issue has been fixed along the way. Thanks for the report.

[dcporter44]

I've updated to 0.17.1 and it still has this issue. To recreate, tab into the SelectField, use the up/down arrows to select an option, then hit return. The field does not update.

Edit: If you have an option already selected in the field and select a new option with the keyboard, it actually sets the field to empty.

[dcporter44]

@oliviertassinari is this going to be reopened or being tracked in another issue?

[oliviertassinari]

@dcporter44 I have reopened it until I realized that you edited your comment. I still can't reproduce it. So I have closed it back.

[dcporter44]

@oliviertassinari Hmm... It's definitely not working correctly for me. If I use the mouse to click and select an option, it works fine. But if I tab into it and select an option using the return key, the field display value is empty. I guess I should bring this to StackOverflow, but it seems like a bug to me since it works fine on click. Perhaps this is caused when using in conjunction with redux-form. If you definitely can't recreate it, I think I'll raise an issue with redux-form.

EDIT: Can confirm this is a redux-form issue. See their material-ui example here:
http://redux-form.com/6.6.1/examples/material-ui/
Dropdown keyboard selection does not work

[vancetran]

Solution: https://github.com/erikras/redux-form/issues/2764#issuecomment-291646393