Error when press down key on autocomplete

[filipenevola]

The problem: when I focus on autocomplete field, start to type and try to select one option with the "down" key then I got an error.

I didn't check your code to see if it is easy to fix, if it is easy please let me know and I can try to create one PR later.

The error

Uncaught TypeError: Cannot read property 'focus' of null
    at SelectField.focusFirstMenuItem (http://localhost:3000/packages/modules.js?hash=6f7dc802871c7fc63f971c313c5e423ce70405ca:59695:20)
    at SelectField._this.handleTextFieldKeyDown 

The code with problem

key: 'focusFirstMenuItem',                                                                                         // 376
    value: function focusFirstMenuItem() {                                                                             // 377
      var firstMenuItem = (0, _reactDom.findDOMNode)(this.menu).querySelector('[tabindex="0"]');                       // 378
      ---> firstMenuItem.focus();                                                                                           // 379
    }   

My component

<SuperSelectField
                    name="brokersToFilter"
                    multiple
                    hintText="digite a corretora..."
                    onChange={this.handleFilterChange}
                    selectionsRenderer={this.handleCustomDisplaySelections('brokersToFilter', 'Todas as Corretoras')}
                    value={this.state.brokersToFilter}>
                    {this.brokersList()}
                </SuperSelectField>



    brokersList = () => {
        return this.state.brokers.map((broker, index) => {
            return (
                <div key={index} value={broker._id} label={Utils.shortName(broker.name)}>
                    <span style={{fontWeight: 'bold'}}>{Utils.shortName(broker.name)}</span>
                </div>
            )
        })
    }

    onRequestDelete = (key, name) => e => {
        e.preventDefault()
        this.updateState({[name]: this.state[name].filter((v, i) => i !== key)})
    }

    handleCustomDisplaySelections = (name, text) => values => values.length
        ? <div style={{display: 'flex', flexWrap: 'wrap'}}>
            {values.map(({label, value: country}, index) =>
                <Chip key={index} style={{margin: 5}} onRequestDelete={this.onRequestDelete(index, name)}>
                    {label}
                </Chip>
            )}
        </div>
        : <div style={{minHeight: 42, lineHeight: '42px', fontSize: 0.8 + 'rem', marginLeft: 10 + 'px'}}>{text}</div> // advice: use one of <option>s' default height as min-height

[Sharlaan]

Hi, thanks for your report.

It's a known bug with Focus handling since i integrated InfiniteLoading in between the main parent component and its children. This has nothing to do with your usage of the component, this is an internal bug.

I'll try to check it more in depth this week.

[filipenevola]

Thank you!

[njaume-zz]

Hi, did this bug work? I'm having the same problem, I can not navigate the list with the keydown after filtering