Allow specific characters to be typed

[alvarotrigo]

I've been checking the docs but it seems there's no easy way to say "I want only numbers AND this one or two special characters". Correct me if I'm wrong.

For example:

To allow the user to type $100 or €100. Or 100 and 100+

A function that allows us to dynamically decide what characters to accept would be nice to have. For example:

function isCharacterAllowed(character){
     var allowedCharacters = ['$', '€', '+'];
     return character.includes(allowedCharacters);
}

[alvarotrigo]

I've been checking the format option, but it seems there's no way to define an "optional format" with it. Perhaps another solution to this would be to allow using a regex for this cases.

For example:

To allow 1000+ or 1+:

regex=".*\+?"

[s-yadav]

Humm, it's not supported right now. One hack is to use onKeyUp and set the suffix based on what character is typed (ie +). But the backspace (deleting + char) will not work with this approach.

We probably can look at this as a new feature, but there are few complexities in implementing it which we can discuss.

One use case which is on top of my mind is, what if a user types the additional character in the wrong place. How do we make sure the special char is typed in right place. How do we set boundaries on the input.

We can probably think more about the regex approach, but the problem is as there other format characters like thousand separator, decimal separator, or if you are providing custom format pattern. Putting a regex is not straightforward.

[alvarotrigo]

One use case which is on top of my mind is, what if a user types the additional character in the wrong place. How do we make sure the special char is typed in right place. How do we set boundaries on the input.

Probably the easiest route is providing the isCharacterAllowed function. Then developers can create any logic they want inside it. They even can define a specific position where the character is allowed. For example, if I want to allow the use of + at the end, I would return false on that function when I detect + was introduced at the end (even numbers). I could use regex on my side for that knowing what values I allow (number, dot, comma, + )

This way the developer has total control over what is allowed and what not and its position, leveraging you from that part.

Then from your side, you ignore anything that is not a number or dot for decimals.

[s-yadav]

Yes, this seems to be a better option.

But to note the value can be updated in multiple ways,

• Paste longer strings.
• Prop value
• Key input

This might change a lot of internal logic. We will have to parse the input value, char by char, and give the control to the parent. Plus, we apply a lot of formatting logic based on props and value, so it will add some complexity.

Let's keep it as an improvement task, and will look more into it, if more people ask for it, or during the next major refactor.

[Parsa-Sedigh]

A related issue is that when I specify format prop and type="number" I can't type into the input: example with material UI So as soon as I remove the type="number", everything works as expected. Do I need to open a separate issue for this?

[s-yadav]

@Parsa-Sedigh, as react-number-format operates on input only and has non-numeric format characters, type="number" will not work as the browser itself will not allow any format character to present in the input.

[lorenzoa7]

Any solutions on this? I also need to be able to type the character "e" for scientifc notations and I don't see how I can do it.

[kasperdun]

@s-yadav Hi, I also need type '# - A - #' and user have to be able type any letter instead of A any solution? your component named PatternFormat but its not provide ability for my pattern?

[Emiliano-Bucci]

@s-yadav Hi! I was specifically looking into this feature, because i'm creating a simple input where i can perform math calculation inside the input, like 100 - 55 + 20; will this feature be implemented? Thanks!

[jovi-tsx]

I have an input for a identity document value called RG (Brazil). All characters are number, except by the last. The last character can accept 0-9 or an X. I wanted this feature so bad :(

[vnt-83]

@s-yadav I need to enter document numbers like: '## AA ######' where # is a number, A is a letter. How can this be done?

[vnt-83]

Is it possible to add another prop patternChar for letters? For example patternCharLetter using 'A' character. For PatternFormat.

[JanderSilv]

This is a desired feature by my team as well, for vehicle plates: