omeralpi / shadcn-phone-input Goto Github PK

Currently, the library indicates that the +212 country code is used for both Morocco and Western Sahara. However, the +212 code is officially assigned only to Morocco. Western Sahara does not have an independent country code and also uses +212, but it is not considered a separate entity in terms of telecommunication standards.

Suggested Correction:

Please update the library to reflect that the +212 country code is exclusively used for Morocco.
This adjustment will help in maintaining accuracy and preventing any potential confusion for users relying on the library for accurate information.

I already have a working app and I cannot change the cmdk version to 0.2.1 as nudged, is there going to be an update to have compatibility with cmdk v1.0.0?

Also I saw that for Saudi Arabia it was throwing invalid number even though I was giving a valid number, kindly do look into it.

Not an issue. Couldn't open a discussion so I have to put it here. Just wanted to say thank you for this library. It solves a lot!

All is working, but there is a ref warning, when using PhoneInput component

Hi friend, i had de next problem with the phone-input.tsx

And I just corrected it this way

You are doing a good job, congratulations, keep it up

latest installation

Selecting a flag doesn't give any outcome. Do you have any idea?

hey @omeralpi ,

First of all many thanks, this library is awesome.

I wonder if you faced a similar issue using react-forms.

I'm adding the following code on my form:

const form = useForm({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      phone: userData?.phone || '',
    },
  });

...
         <FormField
            control={form.control}
            name="phone"
            render={({ field }) => ( // field already has a value
              <FormItem className="dialog-form-field">
                <div className="dialog-form-left">
                  <FormLabel>Phone Number</FormLabel>
                </div>
                <div className="dialog-form-right">
                  <FormControl>
                    <PhoneInput placeholder="Phone" {...field} className="w-4/5 inline-flex" />
                  </FormControl>
                </div>
              </FormItem>
            )}

It works when value is empty but when a value is already set the flag dropdown does not open:

Any idea where the issue can be?

Hi,

Is it possible to add the ability to set the field's value formatting (not display value) to something like E.164 etc.? Manually doing it throws and invalidated the country code for some reason. Probably skill issues on my side. But it would be nice to have that built in.

Can you suggest any way how to make this field optional ?
phone: z.string().refine(isValidPhoneNumber, { message: "Invalid phone number" }).optional()

Will this change work?

By the way, Thanks for building this component and my humble appreciation for your efforts in building it

Popover scroll not working when using mouse.

https://www.loom.com/share/abd87874b683454798636dafee7edbdb

"react-phone-number-input": "^3.3.9"
"@radix-ui/react-popover": "^1.0.7"
"cmdk": "^0.2.1"

I'm using Google Chrome, but I also tested it on Edge

Hi @omeralpi thanks for the amazing component.

However I am facing an issue when using with react hook form and a default value. Whenever i react to about 2-3 digits, the form gets reset (see video below). I did try to debug by using with the debugger that comes with react-hook-form (top right in the screen recording) but could not find the cause

Reproducing example: main...PrinceGupta1999:shadcn-phone-input:main#diff-c02b7335bbc2576d773763466d08672bf1290304608b585826bf87512d5138f1R27-R29

Let me know if I can provide with more info.

I am developing an app in React Native, and I have checked out so many phone-inputs but nothing seems to work perfectly or in real-time. Some of them are actually pretty slow at formatting numbers while typing so if you have any idea how I can use this package in React Native, that would be helpful.
Thank you.

You have to use the keyboard keys to select the countries.

Hey, this is my first Issue submission and I don't have that much experience with frameworks and stuff, also from what I checked I can't seem to find someone else having this same issue,

Using Safari on Mac or iPhone when filling the phone input it seems to not auto-complete correctly. Not sure if it's on all phone formats but I know for sure Romanian does not work:

RO format looks like: +40 700 000 000, but it auto-completes to: +7 00000000

Here is what's happening:

Here is what it should auto-complete to:

At first I fought maybe I implemented the component wrong but I have the same issue on shadcn-phone-input.vercel.app

how do you use this without zod and purely native form

Hi, currently you can enter any number of digits in the phone number field. Is there any possibility to limit the length for each country to the length used in the selected country?

Phone number can have extensions, like this:
const phone = "+12133734253"
const phoneExt = "1234"
returns: "(213) 373-4253 ext. 1234"

It can be formatted like this:
${number} ext. ${extension}
${number} x${extension}

Example of a mui phone input with extension support

Hello,

I've encountered an issue when using server actions with Next.js and attempting to validate phone numbers on the server side.

Currently, the documentation/code suggests using:

import { isValidPhoneNumber } from "react-phone-number-input";

However, this import is client-side oriented and might not be suitable for server-side validations due to its dependency on the react-phone-number-input package, which is primarily designed for client-side React applications.

For server-side validations within Next.js server actions, it's more appropriate to use:

import { isValidPhoneNumber } from 'libphonenumber-js';

First this is awesome i love it.

But when i try to use the example code The input form is throwing this error

Type '{ onChange: (...event: any[]) => void; onBlur: Noop; value: string; disabled?: boolean | undefined; name: "phone"; ref: RefCallBack; placeholder: string; }' is not assignable to type 'Omit<Props<PhoneInputWithCountrySelectType>, "onChange">'.
Types of property 'value' are incompatible.
Type 'string' is not assignable to type 'E164Number'.ts(2322)
(alias) const PhoneInput: React.ForwardRefExoticComponent
import PhoneInput