ui
ui copied to clipboard
Loss of default values in dynamic form elements
Hey, everybody. I am using react hook form and components for the form from shadcn-ui
In my form there is a field in which we can select a category and based on the selected category certain fields will be displayed which are related only to the selected categories. Here are two screenshots with examples
On the first one we can see that the second category is selected and based on this we get the Color field assigned to this category
In the second screenshot, the first category is selected, and the Size and New fields are assigned to it
Each field has default values that come from the backend
And everything works as it should. But if I delete all categories from the list, and then select any from the list of categories, I lose the default values. Although they are coming into the shadcn-ui components, I am logging the values to the console, you can see this in the animation below
I've tried doing it this way, but it doesn't solve the problem
defaultValue={field.value ?? propertyList[0].value}
good
@mr-scrpt the temporary workaround for me is only render the component when field.value is not undefined, because the value is undefined before data from the server arrives and useForm values is updated to not undefined. my guess is the defaultValue is not updated when field.value changed
{(field.value || otherConditionWhereTheFieldIsUndefined) && ( <Select onValueChange={field.onChange} defaultValue={field.value} >