react-maskedinput icon indicating copy to clipboard operation
react-maskedinput copied to clipboard

Invoke onKeyDown, onBeforeInput and onPaste handlers from props

Open Nevon opened this issue 9 years ago • 6 comments

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.

Nevon avatar Aug 30 '16 11:08 Nevon

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

Tab -> onBlur Enter - parent form onSubmit

iamdustan avatar Aug 31 '16 12:08 iamdustan

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 avatar Aug 31 '16 14:08 Nevon

Any other feedback on this?

Nevon avatar Sep 20 '16 11:09 Nevon

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.

briantrice avatar Nov 29 '16 21:11 briantrice

Will be this pull request accepted?

romanivanyushchenko avatar Dec 29 '16 11:12 romanivanyushchenko

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

binaryjunkie avatar Jan 31 '17 00:01 binaryjunkie