Select components

[bizmich]

Radix UI Select's onValueChange runs on rendering without even changing anything, therefore it clears the default value that was passed with react-hook-form.

[vladmoroz]

Could you elaborate with a CodeSandbox example of the problem?

[bizmich]

Could you elaborate with a CodeSandbox example of the problem?

Here you can see that editing any item happens, so I tried to assign data from the backend. When this assignment happens and the value of currencyType changes, the onValueChange function executes. I hope I explained it well.

[vladmoroz]

We'd really need a minimal reproduction to help here

[tonym95]

@bizmich have you managed to find a fix for this issue? I'm having the same problem

[bizmich]

@bizmich have you managed to find a fix for this issue? I'm having the same problem Unfortunately, no, but here is a potential way to solve it, which you can see in the screenshot.

[redalpha01]

I haven't found the solution but basically, I'm initializing the react-hook-form with a value for the select. BubbleSelect's useEffect that watches prevValue and value runs because value is now the value that I passed React-Hook-Form and prevValue is an empty string. This does two thing

1. Try to set the value of the select
2. Dispatches to the hidden select tied to the BubbleSelect telling it that it changed

This event triggers BubbleSelect's onChange function which tries to set it's value from the hidden select's value however the select does not have a value set

We then go through the loop again but in reverse order since the select's value is empty string and it stops there.

Edit : It seems to be because the first useEffect is called before the options are given to the hidden select. Therefore, it refuses any value.

Edit 2 : ~~In my case, I was trying to only render my form after my api call to get my values by using two setStates ( one tracking initialization ), but my initialization state update ran before my values state so it was initializing with empty values. So it went from '' -> 'en' -> '' ~~

Edit 3: Actually this occurs even if I have my data before rendering my form.

Final edit : This basically causes the onchange event to trigger before the select has options, which forces it to have an empty string

[redalpha01]

#2817 Is related to this #3068 Is also probably related to this