Is there a phone input component (textbox with dropdown for countries)?

[Laurin S]

Hi,

I would like to ask if there is a component that looks and behavies like a typical phone input component? More precise, I'm looking for a textbox, that has a dropdown included with all the various countries and its dialling codes. In addition, the dropdown should change its value based on the entered phone number, for example, if someone enters +1, the "country"-dropdown should automatically change to "US +1". Of course, beside the "visual" appearance of the component, the component should also perform some validations and some typical UX-features, like changing the dropdown-value when entering a international number in the text field, ...

Below some example images of typical phone input fields:

(image taken from https://github.com/jackocnr/intl-tel-input)

(image taken from https://gitlab.com/catamphetamine/react-phone-number-input)

I suppose there is no specific component for this. However, are there any existing implementations of such an input field (combination of textbox and dropdown)?

Thanks.

[Berly Christopher]

Hi Laurin, 

  

Greetings from Syncfusion support. 

  

We have already considered the requested requirement as a new control at our end and this implementation will be included in any one of our upcoming releases. We appreciate your patience until then.   

  

We will consider the feature and implement in the certain release based on the customer request count and priority.  You can track the status of the feature from the below feedback link.       

  

Feedback: https://www.syncfusion.com/feedback/15859/  

  

Also, we have prepared the work around solution by integrating the DropDownList and MaskedTextBox component and attached it below. 

  

Sample: 

  

function App() { 

  var data = [ 

    { Eimg: 'us', CountryCode: '+1', Country: 'United States' }, 

    { Eimg: 'gb', CountryCode: '+44', Country: 'United Kingdom' }, 

    { Eimg: 'af', CountryCode: '+93', Country: 'Afghanistan' }, 

    { Eimg: 'al', CountryCode: '+355', Country: 'Albania' }, 

    { Eimg: 'dz', CountryCode: '+213', Country: 'Algeria' }, 

  ]; 

  var fields = { text: 'Country', value: 'Eimg' }; 

  function itemTemplate(data) { 

    return ( 

      <div> 

        <img className="empImage" src={"https://flagcdn.com/16x12/" + data.Eimg +".png"} height="11px" width="20px" alt="employee" /> 

        <div className="ename"> {data.Country} </div> 

        <div className="job"> {data.CountryCode} </div> 

      </div> 

    ); 

  } 

  var src = "./public/images/af.png"; 

  function valueTemplate(data) { 

    return ( 

    <div> 

      <img className="valueTemp" src={"https://flagcdn.com/16x12/" + data.Eimg +".png"} height="11px" width="20px" alt="employee" /> 

      <div className="name"> {data.Eimg.png}</div> 

    </div>) 

  } 

  function onchange(args){ 

    var maskObj = document.getElementById("mask").ej2_instances[0]; 

    if(args.itemData.Country === 'United States'){ 

      maskObj.mask = '[phone]'; 

      maskObj.placeholder = '[phone]'; 

    } 

    else if(args.itemData.Country === 'United Kingdom'){ 

      maskObj.mask = '000-000-0000'; 

      maskObj.placeholder = '000-000-0000' 

    } 

    else if(args.itemData.Country === 'Afghanistan'){ 

      maskObj.mask = '000-000-0000'; 

      maskObj.placeholder = '000-000-0000'; 

    } 

    else if(args.itemData.Country === 'Albania'){ 

      maskObj.mask = '000-000-0000'; 

      maskObj.placeholder = '000-000-0000'; 

    } 

    else if(args.itemData.Country === 'Algeria'){ 

      maskObj.mask = '000-000-0000'; 

      maskObj.placeholder = '000-000-0000'; 

    } 

    maskObj.focusIn(); 

  } 

  return (<div className="wrapper"> 

    <DropDownListComponent change={onchange.bind(this)} id="ddlelement" valueTemplate={valueTemplate.bind(this)} itemTemplate={itemTemplate.bind(this)} width="auto" dataSource={data} fields={fields} index="0" popupHeight="250px" placeholder="Select an employee" popupWidth="400px" /> 

    <MaskedTextBoxComponent id="mask"  mask={'[phone]'} /></div> 

  ); 

} 

 

export default App; 

.e-input-group-icon.e-ddl-icon.e-search-icon{ 

    top: -4px; 

} 

.e-mask.e-input-group{ 

    top: -35px; 

    left: 38px; 

} 

 

  

Regards, 

Berly B.C 

[Anu Kal]

Hi Berly

We are also looking this kind control. 

Would you mind sharing the sample with Blazor controls.

Regards,

Anu

[Ponmani Murugaiyan]

Hi Anu, 

Currently we are preparing custom sample for your requirement, we will update the sample in 2 business days (March 25, 2022) 

Regards, 

Ponmani M 

[Matthew Hill]

Hi Ponmani,

I'm also keen on a Blazor sample, Can you please provide an update?

Cheers,

Matt

[UdhayaKumar Duraisamy]

Hi All,

We have recreated the above angular sample into the Blazor sample. Please find the code snippet and sample link below.

 

<SfDropDownList TValue="string" TItem="Countries" Width="50px" DataSource="Country" PopupWidth="300px" @bind-Value="val">

    <DropDownListTemplates TItem="Countries">

        <ItemTemplate>

            <div>

                <p><img className="empImage" src=https://flagcdn.com/16x12/@((context as Countries).Eimg).png height="11px" width="20px" alt="employee" />  @((context as Countries).Country)  @((context as Countries).CountryCode)</p>

            </div>

        </ItemTemplate>

        <ValueTemplate>

            <div>

                <img className="empImage" src=https://flagcdn.com/16x12/@((context as Countries).Eimg).png height="11px" width="20px" alt="employee" />

            </div>

        </ValueTemplate>

    </DropDownListTemplates>

    <DropDownListFieldSettings Value="Eimg"></DropDownListFieldSettings>

    <DropDownListEvents TValue="string" TItem="Countries" ValueChange="changeHandler"></DropDownListEvents>

</SfDropDownList>

<SfMaskedTextBox Mask="@maskvalue" Width="150px"></SfMaskedTextBox>

@code{

    public string maskvalue { get; set; } = "[phone]";

    public string val { get; set; } = "us";

    public class Countries

    {

        public string Eimg { get; set; }

        public string CountryCode { get; set; }

        public string Country { get; set; }

    }

    private List<Countries> Country = new List<Countries>

{

        new Countries() { Eimg= "us", CountryCode= "+1", Country= "United States" },

        new Countries() {Eimg= "gb", CountryCode= "+44", Country= "United Kingdom"},

        new Countries() { Eimg= "af", CountryCode= "+93", Country= "Afghanistan" },

        new Countries() {Eimg= "al", CountryCode= "+355", Country= "Albania"},

        new Countries() {Eimg= "dz", CountryCode= "+213", Country= "Algeria" }

    };

    void changeHandler(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Countries> args)

    {

        switch (args.Value)

        {

            case "us":

                maskvalue = "[phone]";

                break;

            case "gb":

                maskvalue = "000-000-0000";

                break;

            case "af":

                maskvalue = "000-000-0000";

                break;

            case "al":

                maskvalue = "000-000-0000";

                break;

            case "dz":

                maskvalue = "000-000-0000";

                break;

        }

    }

}

<style>

    .e-input-group-icon.e-ddl-icon.e-search-icon {

        top: -4px;

    }

 

    .e-mask.e-input-group {

        top: -35px;

        left: 38px;

    }

 

    .e-input-group, .e-input-group.e-control-wrapper {

        vertical-align: unset !important;

    }

</style>

 

Regards,

Udhaya Kumar D

Attachment: Telapp_2b875115.zip

[Matthew Hill]

Thank you! This is great.

[Ponmani Murugaiyan]

Hi Matthew,

Thanks for the update. We are glad to hear that the sample meets your requirement.

Regards,

Ponmani M