Selected values are not getting updated from outside of onChange event

[arun567]

Version

2.05.

Here's what went wrong:

<Picky
value={this.state.selectedModel}
onChange={this.handleModel}
multiple={true}

=> Select one value in picky
=> Update the state from outside function and assign the empty value. i.e, selectedModel = [];
=> Select another value in picky
=> See, Instead of one value is selected its getting two values selected

[Aidurber]

This is because Picky maintains an internal state, it's more trouble than it's worth. I'm going to work on a major release making Picky a controlled component only, I can't think of any value it provides being an uncontrolled component, and it causes bugs like this when props and state get out of sync.

[karankumar89]

Yea I observed this too and i did make a hack fix (I can share it here, if you guys want it) for this but i cant solve it for SELECT ALL case
-> When you do a select all in one picky and then update the state from the outside
-> Lets assume only 4 out of 10 elements are now selected
-> IF you try to select 5th element, all the elements get selected.

Anyways thats awesome if you releasing a controlled component only one.

[Aidurber]

@karankumar89 @arun567

I think I get what you mean. Though it might be an issue with your state, not Picky. If you're modifying the value externally, that state is the single source of truth for Picky.

See: https://codesandbox.io/s/747z71zpxj

I check to see if the item exists before adding it.

If I'm not quite on the same wavelength as you two, can you provide a simple CodeSandbox so I can investigate?

Thanks :)

[karankumar89]

@Aidurber Yea you're on the same track but mine was a different use case. I retried the steps and i think its been fixed in the v4.0.1. The steps to reproduce is-

• Select All Elements
• Click on Add Button (only item3 and item4 are selected)
• Select options that are not selected (ex: item 5)
• v3.0.2 all elements get selected instead of just one (item 5)

v4.0.1

https://codesandbox.io/s/j4j0j933lv

v.3.0.2

https://codesandbox.io/s/w6yp3x159l

Thanks for looking into this 🎉

[Aidurber]

@karankumar89 Ahhh I see! Thanks for the reproduction steps.
I'll take a look tomorrow some time.

[Aidurber]

@karankumar89 @arun567 Closing this. In the codesandboxes they were using React 16.0.0. The library depends on > 16.3.0

See #92 (comment)

Unable to replicate any of the above issues on the new 4.1.1 release with React > 16.3.0