Material-ui: [AutoComplete] loses focus when selecting option from list with ENTER or ESC

[crazytyper]

Problem Description

Given an <AutoComplete /> component.
And I focus the text input
And I enter a search text that matches items in the dataSource.
And the option list opens.
And I use key ARROW DOWN to highlight the first option.

When I now hit ENTER or ESC the option list is closed but the focus is not moved back into the text input.

Instead the focus defaults back to document.body because the previously focused element in the option list is removed from the visible DOM.

The behavior can be reproduced with the examples on http://www.material-ui.com/#/components/auto-complete or with this sample http://www.webpackbin.com/VJYpgf3lz

Versions

• Material-UI: 0.16.0
• React: 15.3.2
• Browser: Chrome 54.0.2840.87 (64-bit) (macOS Sierra)

[Airblader]

Just in case anybody is interested in a workaround for this: you can use a ref callback to focus the text field again:

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

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

It's a hack, but it works (for me).

[martinop]

@Airblader doesnt works for me :(

I tried with

this.autoCompleteInput.refs.searchTextField.focus()
this.setState({users: matchUsers})

and

this.autoCompleteInput.focus()
this.setState({users: matchUsers})

<AutoComplete
      floatingLabelText="Choose people"
      openOnFocus={true}
      filter={AutoComplete.noFilter}
      searchText={this.state.usersQuery}
      dataSource={this.state.users}
      dataSourceConfig={this.usersDataSourceConfig}
      onNewRequest={this.usersOnNewRequest}
      listStyle={{maxHeight: '300px'}}
      ref={(input) => { this.autoCompleteInput = input; }}
 />

[oliviertassinari]

Closed by #4783

[kylane]

Was anything done about this, or was it just closed?

[Airblader]

@ramusesan Loud, demanding yelling will not ever get you anywhere. And as @oliviertassinari pointed out, this issue has been closed due to the v1 rewrite of material-ui.

Perhaps this issue should be locked to prevent further discussions here.