Field for Phone country codes in a list

Shopify Apps
1

Hi,

Is there a way to create a field using Polaris for selecting phone country codes in a list or drop-down?

here is an example

wayforward_0-1718888355698.png
wayforward_0-1718888355698.png806×225 9.97 KB

2

Hi @wayforward ,

Thanks for reaching out to the community with your question. This is MooseDesk - An ideal Helpdesk Solution that aligns perfectly with your Start-up.

Following your question, Here’s an example of how to do it using React and the Polaris library: First, make sure you have the necessary packages installed:

npm install @shopify/polaris react-phone-input-2

Next, you can create a component that utilizes these packages. Here is a simple example:

import React from ‘react’; import { AppProvider, TextField, Button } from ‘@shopify/polaris’; import PhoneInput from ‘react-phone-input-2’; import ‘react-phone-input-2/lib/style.css’; class PhoneInputField extends React.Component { state = { phone: ‘’, }; handleOnChange = (value) => { this.setState({ phone: value }); }; render() { return (

<PhoneInput country={‘us’} value={this.state.phone} onChange={this.handleOnChange} inputStyle={{ width: ‘100%’ }} buttonStyle={{ border: ‘none’, background: ‘none’ }} />
); } } export default PhoneInputField;

In this example:

- We use the react-phone-input-2 package to create the phone input field with country code selection.

- The PhoneInput component from react-phone-input-2 is wrapped in Polaris’ AppProvider.

- The handleOnChange method updates the component state with the selected phone number, including the country code. You can integrate this component into your application where you need the phone input field. This setup ensures that the user can select a country code from a drop-down list and enter their phone number.

So this is my answer to your question. If this is helpful for you, please let me know by giving MooseDesk a ‘LIKE’. If your question is answered please mark this as 'SOLUTION’.

Once again, keep up the fantastic work, and I wish you the best of luck in the future! :heart_eyes:

3

Thanks for taking the time to respond.

I tried this (https://www.npmjs.com/package/react-phone-input-2) yesterday but it seems like it is not stable with the Shopify remix template.

I tried customizing it but it kept throwing an error but if I directly use it does work. But without altering it does not work

here is my sample JSX code

import PhoneInput from 'react-phone-input-2'; 

function WhatsAppNumberFieldNew({ whatsappNumber, onChange }) {
  const handleChange = useCallback(
    (value, country, e, formattedValue) => {
      onChange(value); // pass formattedValue if needed
    },
    [onChange]
  );

  return (
    

error: error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Although I have checked I am using default export and tried copy-pasting it in my actual JSX file instead of importing it as a component

EDIT: I noticed I am not wrapping it with **AppProvider**. Can you share some ideas on styling to look closer to polaris textfield, size, position (z-index) so that it does not hide behind other controls?

![wayforward_0-1718971587992.png|467x403](upload://kTDNjgMnJKnD2OUVvmEWs5g4xSF.png)
4

So I tried your code as well. Same error

wayforward_0-1718978159209.png
wayforward_0-1718978159209.png1452×267 6.53 KB

5

I found the issue,

remix is trying to render the component on the server side so use ClientOnly from remix utils.
No need for as well.