'Enter key to capture selected value in react-select dropdown
I am using Async component of react-select for inline editing in ag-grid. There is a event available in react-select component which captures the value and action when we do changes. But key down and enter doesn't capture the change event.
Below is the example of async component -
<Async
className = "async-multi-select"
classNamePrefix="react-select"
isMulti
defaultValue={[]}
id={"aync-react-select"}
{...this.props}
placeholder={""}
onFocus = {() => this.handleFocusChange(true)}
onBlur = {() => this.handleFocusChange(false)}
onChange = {(value,action) => this.handleChange(value,action)}
onKeyDown = {(event: any) => this.onKeyDown(event)}
/>
Below are the events -
private handleChange(value: any[], action: ActionMeta): void {
if (this.props.onChange){
this.props.onChange(value,action)
}
this.setState({hasSelection: value.length > 0});
}
private handleFocusChange(hasFocus: boolean){
this.setState({hasFocus});
}
onKeyDown = (event: any) => {
if (event.key === 'Enter' || event.key === 'Tab'){
//Not sure what to do here
}
}
Has anyone implemented enter and tab functionality in async component?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
