ui icon indicating copy to clipboard operation
ui copied to clipboard

Loss of default values in dynamic form elements

Open mr-scrpt opened this issue 4 months ago • 2 comments

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 image In the second screenshot, the first category is selected, and the Size and New fields are assigned to it image 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 screen2 I've tried doing it this way, but it doesn't solve the problem defaultValue={field.value ?? propertyList[0].value}

mr-scrpt avatar Mar 02 '24 10:03 mr-scrpt

good

MdIntezarAlam avatar Mar 06 '24 13:03 MdIntezarAlam

@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} >

diazsasak avatar Apr 23 '24 16:04 diazsasak