[bug]: Select component when used in form does not populate in first time.

[Sandeep13-web]

Describe the bug

<FormField
                control={form.control}
                name="roleId"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="font-normal">Role</FormLabel>
                    <div className="flex flex-col p-6 space-y-2 rounded-lg border shadow-sm">
                      <FormLabel>
                        Select Role
                        <span className="text-destructive">*</span>
                      </FormLabel>
                      <FormControl>
                        <Select
                          value={field.value}
                          onValueChange={(value) => field.onChange(value)}
                          disabled={
                            !router.asPath.includes("edit") && id ? true : false
                          }
                        >
                          <SelectTrigger className="max-w-80">
                            <SelectValue placeholder="Select Role" />
                          </SelectTrigger>
                          <SelectContent>
                            {rolesList?.data?.results?.map((role) => (
                              <SelectItem
                                key={role?.id}
                                value={role?.id?.toString()}
                              >
                                {role?.name}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </FormControl>
                      <FormMessage />
                    </div>
                  </FormItem>
                )}
              />

this is the code form select that i've been using. When i go into edit page, the i have populated the fields but the select does not populate.

const { data: adminDetail, isLoading: adminDetailLoading } = useQuery<IProps>(
    {
      queryKey: ["adminDetail", router.query?.id],
      queryFn: () => getAdminDetail(router.query?.id as string),
      onSuccess: (data) => {
        form.reset({
          firstName: data?.data?.firstName,
          lastName: data?.data?.lastName,
          email: data?.data?.email,
          contact: data?.data?.contact,
          status: data?.data?.status === "active" ? true : false,
          roleId: data?.data?.role?.id?.toString(),
        });
      },
    }
  );

i have used react query and the role id is not being set the first time. If i refresh the page then only the select is being populated. What seems to be the issue?

Affected component/components

Select

How to reproduce

.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Chrome

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[alamenai]

Could you check the results are not empty?

[Sandeep13-web]

I checked in api and the role ID is there but again i logged form to check the values and values were not setting in that specific key. Does it relate to the api result being number and i am changing it to string? But strange thing is when i refresh it's being populated.

In the form there are several inputs and all of them are being populated besides the select which someone populates and sometimes does not.

[dwalker93]

try this way, value={field.value ? field.value.toString() : ""}

[Sandeep13-web]

okay will try

[WangLarry]

same problem. spent my two days for this!

my current solution:

onValueChange={v => v != "" && field.onChange(v)} 

[thanhnha121]

Same problem.

This workaround fixed, but it wasn't what we expected:

onValueChange={v => v != "" && field.onChange(v)}

[ayushchauhan840]

using key={field.value} worked for me.