omeralpi / shadcn-phone-input

Customizable phone input component with proper validation for any country. Built on top of shadcn.
https://shadcn-phone-input.vercel.app
MIT License
422 stars 28 forks source link

Cannot change the value using react-forms with value set on the field #32

Closed pbarrenechea closed 2 months ago

pbarrenechea commented 2 months ago

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:

image

Any idea where the issue can be?

omeralpi commented 2 months ago

Hey,

Can you send a video about the problem?

pbarrenechea commented 2 months ago

Hi @omeralpi ,

Thanks for your quick response. Of course:

https://github.com/omeralpi/shadcn-phone-input/assets/2423937/3618ac8c-dba0-4d88-92ea-a545daf48f59

Basically when i provide an existing value for the form, the flag dropdown does not open. Can be also a problem in my app though but as i share in the snippet earlier, I don't see anything strange.

Thanks in advance,

Pablo

omeralpi commented 2 months ago

Hi @omeralpi ,

Thanks for your quick response. Of course:

Screen.Recording.2024-06-04.at.3.47.25.PM.mov Basically when i provide an existing value for the form, the flag dropdown does not open. Can be also a problem in my app though but as i share in the snippet earlier, I don't see anything strange.

Thanks in advance,

Pablo

Currently, there doesn't seem to be any problem, but can you share your package.json? 🤔

pbarrenechea commented 2 months ago

Hey, I've tried the library outside my app and works perfectly fine, so it's definitively something there o the app. Many thanks for taking the time to check. Will close the issue.