Material-ui: [Autocomplete] Loses tab focus when selecting an option

[kylane]

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

Expected Behavior

Expect that when I type into an autocomplete field, and receive a dropdown list of items to select from, on selecting an item that the autocomplete input field would retain its focus so tabbing would move to the next field.

Current Behavior

Currently, when you select an option from a dropdown, the focus is lost, and the tab order is broken.

Steps to Reproduce (for bugs)

http://www.material-ui.com/#/components/auto-complete

Start typing in a field - a dropdown autocomplete list will appear, select a value and then the input loses focus, and we lose the tab order.

Context

This ruins keyboard accessibility for impaired users, and greatly hinders workflow in a form environment.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 0.18.0 |
| React | 15.6.1 |
| browser | Any |
| etc | |

[mbrookes]

@kylane Thanks for the clear and reproducible issue report. Would you like to have a go at fixing it?

[oliviertassinari]

@kylane We have been porting the component on the v1-beta branch. We have changed the approach by promoting the usage of third-party libraries, keeping Material-UI for the display. The issue you described is most likely fixed by react-autosuggest or downshift. It's one of their core responsibility.
Still, as @mbrookes suggested, we will accept pull request to fix this issue :).

[kylane]

Thanks @mbrookes & @oliviertassinari - Im using a hack to just refocus a ref to the autocomplete in the state when its value changes.. which is fine for now I guess.

[piyushbob]

@kylane can you please share you code?
Thanks

[kylane]

@piyushbob :

<AutoComplete
    …
    onNewRequest={this.handleNewRequest}
    ref={(input) => { this.autoCompleteInput = input; }}
/>

...and then call this.autoCompleteInput.focus() from the handleNewRequest callback.

[piyushbob]

@kylane, i really thankful to you. But in my case i need to focus too on input field on same time when we select item from list is it possible?