reactjs / react-autocomplete

WAI-ARIA compliant React autocomplete (combobox) component
MIT License
2.17k stars 532 forks source link

Preventing input highlight on pressing enter with no selected menu item #272

Open a3leong opened 7 years ago

a3leong commented 7 years ago

Currently the behavior when the enter key is pressed when there are no items highlighted it selects all the text. Is there a way to prevent this behavior? I have tried using preventDefault() and stopPropagation() on both the React synthetic event as well as native event but haven't had any success with stopping the enter key input from being read.

Arrvi commented 5 years ago

I've developed dirty fix for that problem:

_onKeyDown = event => {
    if (!event.defaultPrevented && event.key === 'Enter') {
        this._preventNextSelection(event)
    }
}

_preventNextSelection = event => {
    const nativeSelect = event.target.select
    event.target.select = () => {event.target.select = nativeSelect}
}

render () {
    return <Autocomplete
        inputProps={{ onKeyDown: this._onKeyDown }}
        ...
    />
}

I guess it is only way until this is fixed