No way to disallow entering letters into the input

[adamhinckley]

Steps to reproduce

1. Select US as the country and enter 208-for-rent in the phone input
2. When I use getNumber it accurately shows that the letters have been converted to numbers that correspond to the numbers on a phone dial pad.

Expected behaviour

I would like a way to disallow entering letters into the input. Does that exist somewhere in the docs and I just missed it?

Actual behaviour

Letters can be used as valid input.

Initialisation options

const initOptions = {
	initialCountry: countryRef.current,
	utilsScript: utilScript
};

[jackocnr]

Thanks for raising this. I'd appreciate your thoughts on the subject: can you describe the reason(s) why you think someone might type a letter in the input in the first place (is it just by accident or are there other possible reasons?)? And why you think silently ignoring the user's action would be better than allowing it and then if they've typed the equivalent of a valid number (like in your example) then converting the letters to numbers, else failing validation?

[adamhinckley]

Thanks for the reply.

I don't know why someone would intentionally type a letter in a phone input in my case, but I can see it happening by accident then being seen as valid when it's not the number the user intended to enter. I also see why it could be desired in some cases outside of my own.

Rather than silently ignoring the letter, I think it would be ideal for it to be seen as invalid so I can show an error to the user. Is this something that could be added as a boolean to the config?

Or Is there a way to extract the string, as typed by the user, so I can run my own validation on it because getNumber() returns the value with the letters replaced with numbers? If that can be done I can check for the existence of letters on my own.

[adamhinckley]

We ended up finding a work around.

Context: this is in a React app and we used the React component from this library (thank you 🙏) as a guide to build our own React component.

This is how we are able to get the input as the user typed and check for letters

// remove non-english letters and accents
const rawValue = inputEl.value.normalize('NFD').replace(/[\u0300-\u036f]/g, '');

const isValid = itiRef.current.isValidNumberPrecise() && !/[A-Za-z]/.test(rawValue);

[jackocnr]

Rather than silently ignoring the letter, I think it would be ideal for it to be seen as invalid so I can show an error to the user

Thanks for your input. I agree with this. I think we should add an extra condition to isValidNumber and isValidNumberPrecise to confirm there are no alpha chars in there. We use libphonenumber for validation and I think they support alpha char substitutions because in some cases that is useful to them e.g. for when users want to dial numbers in that way, but I don't think it would ever be useful for this plugin. I'll re-open this issue to track this feature. I would be open to a pull request that adds this extra check in those two methods.

[jackocnr]

Added in v20.0.0

[jackocnr]

we used the React component from this library (thank you 🙏) as a guide to build our own React component

@adamhinckley was there a particular reason the provided component didn't fulfil your needs? Or you just preferred a different component/prop architecture or something? I would welcome any feedback on how to improve it. Cheers

[jackocnr]

In addition to the previous work, I have now added a strictMode option, which prevents users from entering invalid characters. Added in v20.2.0.