How to clear form Select and NumberInput when edited another Input in uncontrollable mode

[sudden needle]

• Problem 1: clear <Select> meal, when edited <Select> food and vice versa
• Problem 2: clear <NumberInput> quantity, when edited <NumberInput> amount and vice versa

Maybe it is not possible in recommended uncontrolled mode

interface FoodPortionModalFormValues {
  food: string | null,
  dish: string | null,
  quantity?: string | number,
  amount?: string | number,
  mass_measurement_unit: string,
}

 // form object
  const form = useForm<FoodPortionModalFormValues>({
    mode: "uncontrolled",
    initialValues: FoodPortionFormValuesEmptyForm,
    validate: (values) => ({
    food: !values.food && !values.dish ? "Выберите продукт или блюдо" : null,
    dish: !values.food && !values.dish ? "Выберите продукт или блюдо" : null,
    amount: !values.amount && !values.quantity ? "Укажите кол-во или точный вес порции" : null,
    quantity: !values.amount && !values.quantity ? "Укажите кол-во или точный вес порции" : null,
    }),
});

<form onSubmit={form.onSubmit(submitForm)}>
      
<Stack>
  <Select
    {...form.getInputProps('food')} // uncontrolled mode
    key={form.key('food')} // uncontrolled mode
    data={mapToMantineSelectOptions(food, 'id', 'as_string')}
    limit={50}
    searchable
    placeholder="Еда"
  />

  <Select
    {...form.getInputProps('dish')} // uncontrolled mode
    key={form.key('dish')} // uncontrolled mode
    data={mapToMantineSelectOptions(customDishes, 'id', 'as_string')}
    limit={50}
    searchable
    placeholder="Свое блюдо"
  />

    <NumberInput
      {...form.getInputProps('quantity')} // uncontrolled mode
      key={form.key('quantity')} // uncontrolled mode
      min={0.01}
      max={999}
      allowNegative={false}
      placeholder="Количество"
    />

    <NumberInput
    {...form.getInputProps('amount')} // uncontrolled mode
    key={form.key('amount')} // uncontrolled mode
    min={0.1}
    max={9999}
    allowNegative={false}
    placeholder="Точный вес"
    />
  </Stack>
</form>

[brave bobcat]

Call form.setFieldValue('food', null) when you need to clear select value. For NumberInput, call form.setFieldValue('amount', '')

[sudden needle]

do I need to change the form in "controlled" mode or keep "uncontrolled"?

[brave bobcat]

It works in both. Uncontrolled mode requires setting key={form.key('...')}