Adding format on type feature prop

[bncunha]

Describe the issue/change

Hi! This is a suggestion for a new feature to show mask only when typing.

Describe the changes proposed/implemented in this PR

This PR propose a new prop called formatOnType, this new prop only show the mask when typing, eliminating white spaces and improving screen readers.

Example usage (If applicable)

<PatternFormat format="+1 (###) ###-####" formatOnType />

Screenshot (If applicable)

This video below is how is the library today, the mask already show on input when start typing.
https://user-images.githubusercontent.com/21287627/192879722-9c9728ab-d60e-404f-9e17-c3ce84124f35.mov

This video below is the suggestion. Realize that mask only show when digit comes to mask.
https://user-images.githubusercontent.com/21287627/192880076-3814b96f-b716-46ab-b39e-e58b54ef301f.mov

Please check which browsers were used for testing

• Chrome
• Chrome (Android)
• Safari (OSX)
• Safari (iOS)
• Firefox
• Firefox (Android)

[s-yadav]

There is one corner case with this, try format="+1 (###) 2##-####"

Then try to type this character by character 2222, you will see after typing 4th 2, the cursor comes at the wrong place. +1 (222) 2|2.
See the behavior here:

Screen.Recording.2022-10-01.at.10.45.20.PM.mov

The reason for this is the caret engine of RNF is agnostic of pattern, it tries to find the new caret position based on the input value (what user types), formatted value (value after formatting is applied), and input caret position (before applying formatting).
To handle the pattern which has the number what we do is to move the cursor to next allowed caret position even before the character is added, so the caret engine doesn't have to deal with this. Reference: https://github.com/s-yadav/react-number-format/blob/master/src/pattern_format.tsx#L224

With the partial format being applied this would not be possible.

[s-yadav]

If you have a custom use case where the number doesn't come as a format character in middle, you can implement this logic outside. See the customization guide. https://s-yadav.github.io/react-number-format/docs/customization/

And if you implement some custom logic outside please do share a codesandbox example here, so others with similar use cases can do the same.