onKeyPress and onKeyDown not working
See original GitHub issueHello, Im having a problem with onKeyPress and onKeyDown. I did create a component called Input, and have this line:
<MaskedInput id="message" mask={this.props.mask} type={this.props.type} className="inpt inpt-default" placeholder={this.state.text} onBlur={this.onBlur} onFocus={this.onFocus} name={this.props.name} onChange={this.onChange} onKeyPress={this.props.onKeyPress} value={this.state.message}/>
And Im calling the Input component like this:
<Input ref="input" type="phone" name="phone" mask="(11) 11111 1111" onClick={this.inputOnClick} onKeyPress={this.handleKeyPress}/>
handleKeyPress(event){
if(event.key === "Enter"){
this.processUserInput(event.target.name);
}
}
I know that my handleKeyPress function is working for two reasons, first, is working at other regular inputs, second, I had replaced use onKeyPress={this.props.onKeyPress} for onKeyUp={this.props.onKeyPress} and worked.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:5
- Comments:5
You can find the solution here:
https://gist.github.com/krambertech/76afec49d7508e89e028fce14894724c
handleKeyPress(event){ if(event.key === "13"){ this.processUserInput(event.target.name); } }
<Input ref="input" type="phone" name="phone" mask="(11) 11111 1111" onClick={this.inputOnClick} onKeyPress={(e) => this.handleKeyPress(e)}/>
Similar issue here.
onKeyDown
andonKeyUp
both work, butonKeyPress
in the same context doesn’t function. Would love to have a fix for this!