react-autocomplete icon indicating copy to clipboard operation
react-autocomplete copied to clipboard

Preventing input highlight on pressing enter with no selected menu item

Open a3leong opened this issue 7 years ago • 1 comments

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.

a3leong avatar Aug 30 '17 15:08 a3leong

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

Arrvi avatar Apr 04 '19 09:04 Arrvi