Invoke onKeyDown, onBeforeInput and onPaste handlers from props

[Nevon]

In a product I'm working on, we have some special handling on key presses that extends beyond the scope of the onChange handler. For example, when pressing tab or enter, we want to run some validation. Unfortunately, the masked field does not invoke the onKeyDown that is passed down as a prop, making this impossible.

This change will invoke the passed handlers if they are defined, after running the internal logic for the masked field.

[iamdustan]

The two examples you provided are supported by browsers out of the box.

Tab -> onBlur
Enter - parent form onSubmit

[Nevon]

They are semantically different though. A field can get blurred without the user having pressed tab, and enter can be pressed in a field without submitting the parent form.

You can for example imagine autocompletion where the user presses the down key to select a suggested word or phrase, and then presses tab or enter to have the value be autocompleted. There are lots of situations in which you may want to handle these events within your application, so I don't see any reason why this component would swallow those props.

[Nevon]

Any other feedback on this?

[briantrice]

I am interested in using up and down arrows to increment and decrement digits on a numeric mask. So that 👍 from me, or for that more specific change.

[romanivanyushchenko]

Will be this pull request accepted?

[binaryjunkie]

+1, looking to use up/down arrows to increment and decrement numbers, keyDown support would be great.