onKeyPress and onKeyDown not working

[WilliamCSA04]

Hello, 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.

[javierggi]

Did you get this to work? I am stuck with the same problem.

[WilliamCSA04]

Not really, I had to use KeyUp instead.

[m-salamon]

Im having the same issue, can anyone help please

[cooperjones]

Similar issue here. onKeyDown and onKeyUp both work, but onKeyPress in the same context doesn't function. Would love to have a fix for this!

[Byron2016]

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)}/>