feat: ✨ Support Extensions with Additional Field

leachtucker commented 7 months ago

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 onChange callback.

Considerations

The formatted value passed to the onChange callback of MuiTelInput adheres to Google's development style guide on phone numbers.

Google's Dev Style Guide

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.

viclafouch commented 6 months ago

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

leachtucker commented 6 months ago

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.

pierce23john commented 6 months ago

Hi, we've been looking for this as well and it seems like a good idea :)

leachtucker commented 5 months ago

Hey @viclafouch. Any word on this?

mohsenomidi commented 2 months ago

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

viclafouch commented 2 months ago

Hello !

Could you please fix the conflicts in order to merge the PR ;)

leachtucker commented 1 month ago

Hey @viclafouch, PR is fixed up. Should be ready for merge 👍

bryanjtc commented 4 weeks ago

@viclafouch Waiting on a release with this change

viclafouch / mui-tel-input