Estoy usando el componente Async de react-select para la edición en línea en ag-grid. Hay un evento disponible en el componente react-select que captura el valor y la acción cuando hacemos cambios. Pero presionar e ingresar no captura el evento de cambio.
A continuación se muestra el ejemplo del componente asíncrono:
<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)} />A continuación se muestran los eventos:
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 } }También intenté usar el evento onInputChange, pero eso da una cadena como entrada. Quiero cualquier [] como entrada y, por lo tanto, estoy usando el evento onChange. ¿Alguna idea de cómo puedo manejar este evento con la tecla enter y tabulador?