[AutoComplete] component doesn't select first item by down arrow after clicking on it

[yavalvas]

Problem description

After updating to new 0.15.3 version I've found an issue with AutoComplete component, when you click on AutoComplete text field and after that try to go by down arrow to first opened item it won't go there, after two clicks it goes to second item in opened menu. When I go to AutoComplete's field by tab action it works good for this case.

Steps to reproduce

I have following component
<AutoComplete filter={AutoComplete.caseInsensitiveFilter} floatingLabelFixed={true} openOnFocus={true} fullWidth={true} dataSource={s_.variables} dataSourceConfig={{text: 'data', value: 'id'}} floatingLabelText="My Field" onNewRequest={(data) => this.selectData(data.id)} onUpdateInput={this.handleUpdateInput.bind(this, "data")} searchText={s_.searchText.data} onFocus={this.setSearchText.bind(this, "data")} />

1. Click on it.
2. Try to go by down arrow to first 'variable' of s_.variables.
3. After second arrow click it goes to 2nd 'variable', but it doesn't go to 1st one anyway.

Versions

• Material-UI: 0.15.3
• React: 15.2.1
• Browser: chrome 51.0.2704.103 m (64-bit)

Thanks to update for setting of searchText to AutoComplete component, it works good and without dirty hacks with setTimeout!

[nicolaiskogheim]

I can confirm that this happens on both v0.15.3 and master.

Steps to reproduce:

• Build docs locally
• cd docs ; npm run browser:development
• Navigate to http://localhost:3000/#/components/auto-complete
• Type something in one of the autocomplete fields
• Click once on the text field
• Press down arrow

Expected: First item gets highlighted
Actual: No item gets selected, and the glowing bar goes away

An extra arrow press takes you to the second element, as was pointed out by @yavalvas

[CreepGin]

I can also confirm the issue. It's been around for awhile, but never completely fixed. See #4193 #3629 #3867

[atoko]

Tried to make progress on this tonight. I added a keyDown handler to the menu from the auto complete to watch for "up" keycode. I got stuck when trying to focus the TextField. I tried .close and setState with focusTextField: true.

Any ideas?

[astanway]

+1, issue remains despite #4193

[emirpasic]

The AutoComplete component does not set it's child menu to isKeyboardFocused state on key down. Until this is fixed, there is hackish temporary fix:

    onKeyDown() {
        this.autoComplete.refs.menu.setState({
            isKeyboardFocused: true,
        });
    }

    render() {
        return (
                <AutoComplete onKeyDown={this.onKeyDown.bind(this)}
                              ref={ref => this.autoComplete = ref}
                 .... />
       ....

[grzegorzlademan]

+1
Any updates on this?

I have noticed the same bug.
But it occurs only when option 'openOnFocus' is set to true and while entering the AutoComplete field with mouse. If I enter the field with Tab-key then the keydown is working as expected.

[oliviertassinari]

Closed by #4783