How to set default value of React Select input from an async fetch response

[cliffordp]

The only way I've found to get defaultValues working is if the function is outside the React component and it's a hard-coded value or something from the global window object.

However, I need to set a value for a React Select field from an async fetch() response and it's not working even though it's in the same format as the defaultValues hard-coded one is.

I've been at this for a long while so any pointers would be really great. tyvm!

===

Because of having to be outside the component, I can't use React hooks like React Query so I just did a straight fetch()

[bluebill1049]

have you tried by just using setValue and with Controller?

[cliffordp]

For sure. It fires the function (since it has a console.log) but it doesn't actually set the value.

[bluebill1049]

can you provide a simple CSB?

[cliffordp]

Correction, I see defaultValue as a Controller property but not setValue at https://react-hook-form.com/api#Controller

Here's my start: https://codesandbox.io/s/rhf-react-select-setvalue-98ns4?file=/src/index.js
Notice the // Works: type of comments

Find "getReactSelectDefault" in the code.

[bluebill1049]

i think you should use reset({...getValues(), {xxxx} })

[cliffordp]

Reset is part of Controller?

[bluebill1049]

yes.

[cliffordp]

Sorry, I'm not following... so in my sandbox... go from this:

<Controller
              as={ReactSelect}
              options={options}
              name="ReactSelect"
              isClearable
              control={control}
              defaultValue={getReactSelectDefault()}
            />

to this?

<Controller
              as={ReactSelect}
              options={options}
              name="ReactSelect"
              isClearable
              control={control}
              reset({...getReactSelectDefault(), {xxxx} })
            />

[bluebill1049]

no, sorry I misunderstood your question and confused you. just reset the whole form at the useEffect with reset

[cliffordp]

So upon initial form loading, reset entire form? What's the useEffect dependency? Have a sandbox link?

[bluebill1049]

after your request is resolved

reset({
  ...getValues(),
  xxxx // your select updated value
})

[cliffordp]

Sorry I'm needing extra help here :(

I updated my CSB link as far along as I could get it but no dice.
I found the reset example at https://react-hook-form.com/api#reset but that's for resetting the entire form and I'm just trying to set the default value for a single ReactSelect field whenever the form loads, not to change someone's existing input if already touched.

Thanks much for the extra hand-holding here.

[bluebill1049]

yes, you can omit any of the formState changes.

[cliffordp]

I get that for reset's args, but I'm not even getting that far along. Would you please look at the CSB and correct it for me?

[bluebill1049]

i can, can you fix the CSB, i will take a look later during lunch break

[cliffordp]

the useEffect snippet was doing all that - no error now that it's commented out

[bluebill1049]

this is what you mean: https://codesandbox.io/s/rhf-react-select-setvalue-v0u1z?file=/src/index.js?

[cliffordp]

omg tyvm!

[bluebill1049]

all good :)

[cliffordp]

Out of curiosity, why does using an async function (vs non-async) cause the following error?

Warning: A component is changing a controlled input of type hidden to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

[bluebill1049]

because react need to know it's a controlled or uncontrolled during the render

[cubecleveland]

HI Guys,

Im struggline with this as it seems it should be a simple implementation.
Also trying to implement setting the option in the async after the fetch.......
Im not using a controller .
Here is my code:

const loadOptions = async (inputValue, callback) => {
let i = await Site.search({name: inputValue}).then(e => e.data)
return i;
}
<AsyncSelect
// styles={customStyles}
loadOptions={loadOptions}
ref={ref}
defaultOptions
isMulti
isDisabled={isAllSites}
getOptionLabel={e => e.name}
getOptionValue={e => e.id}
closeMenuOnSelect={false}

                  defaultValue={values ??? what should go in here}
              />

[bluebill1049]

you should use defaultValues at the useForm.

[phoopwint15]

I want to reset my form with initial values fetched from the API. One field, vaccinename, depends on another field, vaccinetype. Right now, when I reset the form with API data, vaccinename doesn’t show the correct value because it’s tied to vaccinetype. I want vaccinename to show the API value initially, but only update when the user changes vaccinetype. How can I do this?

`
const form = useForm<z.infer>({
resolver: zodResolver(formSchema),
defaultValues: {
vaccinetype: "",
vaccinename: "",
});

const selectedVaccineTypeName = useWatch({
control: form.control,
name: "vaccinetype",
});
const selectedVaccineType = vaccinetypes?.find(
(v) => v.name === selectedVaccineTypeName,
);
const vaccineTypeId = Number(selectedVaccineType?.id) || undefined;
const { data: vaccines } = useVaccinesByType(vaccineTypeId);

useEffect(() => {
if (!vaccination) return;
const timer = setTimeout(() => {
form.reset({
vaccinetype: vaccination.vaccine?.vaccine_type?.name ?? "",
vaccinename: vaccination.vaccine?.id.toString(),
});
}, 300);
return () => clearTimeout(timer);
}, [vaccination, form]);

      <FormField
        control={form.control}
        name="vaccinetype"
        render={({ field }) => (
          <FormItem className="py-2.5 mr-2.5 w-full">
            <FormLabel required>Vaccine Type</FormLabel>
            <Select
              onValueChange={(value) => {
                field.onChange(value);
                form.setValue("vaccinename", "");
                form.trigger("vaccinename");
              }}
              value={field.value?.toString()}
            >
              <FormControl className="w-full">
                <SelectTrigger>
                  <SelectValue placeholder="Select vaccine type" />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                {vaccinetypes?.map((v) => (
                  <SelectItem key={v.uuid} value={v.name}>
                    {v.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <FormMessage />
          </FormItem>
        )}
      />
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-2.5">
        <FormField
          control={form.control}
          name="vaccinename"
          render={({ field }) => (
            <FormItem className="py-2.5 mr-2.5 w-full">
              <FormLabel required>Vaccine Name</FormLabel>
              <Select
                onValueChange={field.onChange}
                value={field.value?.toString()}
              >
                <FormControl className="w-full">
                  <SelectTrigger>
                    <SelectValue placeholder="Select vaccine name" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  {vaccines?.map((v) => (
                    <SelectItem key={v.uuid} value={v.id.toString()}>
                      {v.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          )}
        />

`