mui-tel-input
mui-tel-input copied to clipboard
viclafouch
feat: ✨ Support Extensions with Additional Field
Description
Adds support for inputting extensions via an additional input field.
Why
This library is incredibly useful yet it lacks support for entering extensions which is commonplace in the B2B world.
Changes
- Extensions are managed via an additional input which can be enabled/disabled. It is off by default.
- Parse extensions passed within the value prop of MuiTelInput.
- Upon change of extension, the new value is included in the number (and info object) provided to the
onChangecallback.
Considerations
The formatted value passed to the onChange callback of MuiTelInput adheres to Google's development style guide on phone numbers.
To specify a phone extension, follow the phone number with the word extension, and then specify the extension number.
Due to the As You Type formatter not supporting extensions, the extension feature requires some additional layers of indirection and complexity in number parsing and formatting. As the complexity of the usePhoneDigits hook is growing, it is beginning to warrant some refactoring in order to improve code readability.
https://github.com/catamphetamine/libphonenumber-js
Google's "As You Type" formatter does not support entering phone number extensions. If your project requires phone number extensions input then use a separate input field for that.
Hello !
Hum I'm waiting for more upvote because I for my personal POV, I've never seen an tel input like this. I don't really know the usecase for that.
But thanks for your PR <3
Ty
Hello !
Hum I'm waiting for more upvote because I for my personal POV, I've never seen an tel input like this. I don't really know the usecase for that.
But thanks for your PR <3
Ty
Sounds good! Usually on the web, you would either find one input which supports the addition of extensions. Or, two inputs--one for the main number and one for the extension. Here, we technically have two but they act as one, which is convenient when integrating with a form. Anyhow, will keep an eye on this PR -- I am confident others have a use-case as well since extensions are relatively common for B2B.
Hi, we've been looking for this as well and it seems like a good idea :)
Hello !
Hum I'm waiting for more upvote because I for my personal POV, I've never seen an tel input like this. I don't really know the usecase for that.
But thanks for your PR <3
Ty
Dear @viclafouch
You are right, This type of tel input is not common case for general use cases in B2C application like social network web pages, online stores and etc.
This type of input is common on enterprise web application like ERP applications CRM or admin panels, for example when you register the company as an entity, in contact details they generally have only one phone line and many extensions. when you need to call finance department you will call that phone number and ext: 101 for Sales Ext:102, Fax Ext: 103 and so on. this feature is very useful for enterprise application and B2B use cases.
We've been looking for this as well and seems the implementation is good.
Thanks
