react-functional-select icon indicating copy to clipboard operation
react-functional-select copied to clipboard

initialValue prop not working?

Open julianeden opened this issue 2 years ago • 3 comments

Hi, I have initialValue set and it's not using it.

        <Select
            initialValue={maxPlayers}
            options={[1, 2, 3, 4, 5, 6, 7, 8]}
            onOptionChange={setMaxPlayers}
            getOptionValue={opt => opt}
            getOptionLabel={opt => opt}
          />

I even hard-coded it to initialValue={2} without success. Am I doing something wrong?

julianeden avatar Feb 08 '23 12:02 julianeden

Okay, by examining the source code I found that this prop is passed through a call to normalizeValue, and that if it isn't an array or a plain object it returns an empty array here. Not sure if this is a bug or intended, but it seems like a bug since the documentation says type: any for this prop.

Putting the passed prop value in an array resolves the issue, but this seems like it might merit a fix. Since initialValue is rather integral to many form inputs I'm somewhat surprised to find this bug at all. Can't imagine how nobody ran into it before.

julianeden avatar Feb 08 '23 12:02 julianeden

I found a second issue with this, although this time I'm less sure what can be done about it. Because the dropdown has an initialValue prop but no value prop, programmatically updating the state value the dropdown is associated with doesn't update the dropdown itself. It can only be updated by the user manually changing it.

So if I want to change the dropdown's value in response to a separate user action, there doesn't seem to be a way to do so. Is there a way to do this?

Edit: I found that I can do this using a ref and the prescribed API, although this feels a bit hacky.

julianeden avatar Feb 08 '23 14:02 julianeden

I miss the value prop. In my case, the ref.current.setValue is in useEffect and depends on a prop (an array of strings). When I set isMulti=true I get an inifity loop.

I tried to set intialValue or defaultValue and the input is not refreshed, but the component state is updated according to the Chrome Dev Tools. Screenshot 2024-04-09 at 12 11 06

natBizitza avatar Apr 09 '24 10:04 natBizitza