Resetting a shadcn Select field

[slinden2]

I am trying to reset a select field based on a value of another select field. I am able to effectively reset the form value, but the component itself keeps showing the value it was set before. I have verified this by console.logging the field values. Here is a .gif to make it obvious:

The idea is that if the first field on the left has no selection or the first value (No spazzole) is selected, the other two fields must be disabled and reset to undefined. The disabling part works and the values even get reset to undefined, but I don't know how to reset the select fields shown value back to placeholder.

I am using shadcn components, so all the form logic is provided by react-hook-forms.

Please see the Select component below. I reset the field on Select onValueChange function:

"use client";

import * as React from "react";
import { useFormContext } from "react-hook-form";
import {
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { SelectOption } from "@/types";
import { ConfigFormData } from "@/components/ConfigForm";

interface SelectFieldProps {
  name: keyof ConfigFormData;
  label: string;
  placeholder: string;
  description?: string;
  className?: string;
  disabled?: boolean;
  items: SelectOption[];
  fieldsToResetOnValue?: {
    triggerValue: string | number;
    fieldsToReset: Array<keyof ConfigFormData>;
  };
}

const SelectField = ({
  name,
  label,
  placeholder,
  description,
  className,
  disabled,
  items,
  fieldsToResetOnValue,
}: SelectFieldProps) => {
  const { control, resetField } = useFormContext();
  return (
    <FormField
      control={control}
      name={name}
      render={({ field }) => {
        return (
          <FormItem className={className}>
            <FormLabel>{label}</FormLabel>
            <Select
              onValueChange={(val) => {
                if (val == fieldsToResetOnValue?.triggerValue) {
                  fieldsToResetOnValue.fieldsToReset.forEach((fieldName) => {
                    resetField(fieldName);
                  });
                }
                return field.onChange(val);
              }}
              defaultValue={field.value}>
              <FormControl>
                <SelectTrigger disabled={disabled}>
                  <SelectValue placeholder={placeholder} />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                {items.map((item) => {
                  return (
                    <SelectItem key={item.value} value={item.value.toString()}>
                      {item.label}
                    </SelectItem>
                  );
                })}
              </SelectContent>
            </Select>
            {description && <FormDescription>{description}</FormDescription>}
            <FormMessage />
          </FormItem>
        );
      }}
    />
  );
};

export default SelectField;

Here is also the Form component where the SelectField components are created. I removed all markup that isn't related to the SelectFields:

"use client";

import React, { useState } from "react";
import { Form } from "@/components/ui/form";
import { z } from "zod";
import { configSchema, selectFieldOptions } from "@/validation/configSchema";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import InputField from "@/components/InputField";
import TextareaField from "@/components/TextareaField";
import SelectField from "@/components/SelectField";
import { Separator } from "@/components/ui/separator";
import CheckboxField from "@/components/CheckboxField";

export type ConfigFormData = z.infer<typeof configSchema>;

const ConfigForm = () => {
  const [error, setError] = useState<string>("");

  const form = useForm<ConfigFormData>({
    resolver: zodResolver(configSchema),
  });

  const brushNum = form.watch("brush_num");
  const hasChemicalPump = form.watch("has_chemical_pump");
  const hasAcidPump = form.watch("has_acid_pump");

  console.log("brushNum", brushNum);
  console.log("selectFieldOptions", selectFieldOptions);

  async function onSubmit(values: ConfigFormData) {
    console.log(values);
  }

  return (
    <div>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <div className="md:flex md:justify-between md:gap-4">
            <SelectField
              name="brush_num"
              label="Numero di spazzole"
              placeholder="Selezionare..."
              className="md:flex-1"
              items={selectFieldOptions.brushNums}
              fieldsToResetOnValue={{
                triggerValue: 0,
                fieldsToReset: ["brush_type", "brush_color"],
              }}
            />
            <SelectField
              name="brush_type"
              label="Tipo di setole"
              placeholder="Selezionare..."
              className="md:flex-1"
              disabled={!brushNum || brushNum == 0}
              items={selectFieldOptions.brushTypes}
            />
            <SelectField
              name="brush_color"
              label="Colore di setole"
              placeholder="Selezionare..."
              className="md:flex-1"
              disabled={!brushNum || brushNum == 0}
              items={selectFieldOptions.brushColors}
            />
          </div>
        </form>
      </Form>
      <p className="text-destructive">{error}</p>
    </div>
  );
};

export default ConfigForm;

[KDust7]

#638

[KDust7]

Please look at the above forum