Giters

soywod / react-pin-field

📟 React component for entering PIN codes.

Home Page:https://soywod.github.io/react-pin-field/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

onChange/onComplete events not triggered when a not valid key is pressed

sclavijo93 opened this issue · comments

commented

If I complete the pin field and then I go to the first or any field that is filled and press one of these keys (ArrowUp[38], ArrowDown[40], ContextMenu[93], Esc[27], or whatever key that is not valid with this regex /^[0-9]$/) the content of that field is deleted. Is this intended? Also, the onchange event is not triggered

I think that is better if the pushed key is not valid, that field should stay untouched. Or maybe that could be configurable via a prop? deleteWhenNotValid or whatever, it's just a brainstorming

Code example:

codesandbox.io

Steps to reproduce:

  • Fill the pin fields
  • Go to a field that is filled
  • Press a letter or an arrow (Up or Down)
  • The field is deleted but the onChange/onComplete event is not triggered.
  • The current code and completed rows are not updated

Environment

Tech Version
Browser Chrome Version 80.0.3987.149 (Official Build) (64-bit)
react 16.13.0
react-pin-field 1.0.2
commented

You right, it makes more sense to keep the field untouched when a key is rejected. I don't think a prop is needed, since the behaviour can be simulated inside the onRejectKey. I will fix ASAP. Or feel free to propose a PR :)

commented

Fixed in v1.0.3 [diff] 🎉