catamphetamine / react-phone-number-input

React component for international phone number input
http://catamphetamine.gitlab.io/react-phone-number-input/
MIT License
924 stars 194 forks source link

Feat: Support alphanumeric values #424

Closed kamalbennani closed 1 year ago

kamalbennani commented 1 year ago

Hello 👋

First of all, I'd like to thank you for the work and dedication you are putting in to maintain this repository and also the libphonenumber-js one.

We started using the react input library in one of our internal apps and we have faced a limitation where the PhoneInput component cannot be used to type in a potential number AND/OR type in a non-valid phone number (for instance to look up a contact by its name).

Is it planned to support such a use case in the future or is there already an alternative that I might have missed to fulfill this requirement?

Thanks in advance for your answer.

catamphetamine commented 1 year ago

What?

kamalbennani commented 1 year ago

I guess the "issue" I raised was very unclear... sorry for that.

What I mean is the following: Do we agree that today the React components that this library exposes "PhoneInput" only accept "+" characters and "numeric" values which are fair because those are the only valid "combination" that could constitute valid national or international phone numbers?

But let's say that the same component is used to either type a number OR look up a contact by its name basically this is "impossible" to achieve due to this constraint.

So I was wondering if there is a way to "allow/make" the PhoneNumber component accepts alphanumeric values and only apply phone number validation when the value is a possible phone number?

For instance:

# Case: Potential valid number
Input(value): +1707
Output(Displayed value): +1 707 
# Case: Not valid phone number
Input(value): John doe
Output(Displayed value): John doe

I'm assuming that this limitation is enforced by the use of the "AsYouType" class.

Does it make sense now?

catamphetamine commented 1 year ago

This component won't allow inputting letters if that's what you're asking

kamalbennani commented 1 year ago

Well, that's unfortunate.