#Issue with creatable selects after upgrade from 4.x to 5.x

21 messages · Page 1 of 1 (latest)

honest sparrow
#

My application makes use of creatable <Select/>s. After upgrading to the latest 5.x release, I have issues with selecting newly created items. I am doing the new requirement of returning a select data item from the onCreate callback, and the item is added to the drop down list, but it is not registered as having been selected. I suspect this has something to do with how state is being managed.

Here's a sandbox that reproduces the issue:
https://codesandbox.io/s/angry-lewin-1q46bc

Is this a bug, or is there more that has to be changed in how new item creation is managed in 5.x?

exotic citrus
#

save your codesandbox with ctrl + S and re link it here

honest sparrow
#

Oops. Fixed.

honest sparrow
#

My best guess is that because I generate the data prop from an array of objects and append to this source data on create, the select item returned from the onCreate callback differs from the equivalent item generated on the next render.

#

Before we had the requirement to return the created item from the function all I'd have to do is update the source data list and selection state, and then on the next render voila the new item would exist as well as it being selected. It's not clear with the new usage pattern how it's supposed to work.

exotic citrus
#

and append to it during onCreate

honest sparrow
#

Isn't it already?

exotic citrus
#

you've used useMemo rather than state, this is the first time I've seen it be memoised

honest sparrow
#

I did just try making sure the created item returned from onCreate is identical to what's returned from the useMemo array, but that didn't work, but let me try binding the data prop to state instead. Maybe that will alleviate race conditions with the useMemo hook...

exotic citrus
#

i'll adjust the code and re-link

#

also you're using the same value multiple times over

#

this will cause a conflict

#

if you want a numeric ID system, make an incremental ID for it

honest sparrow
#

Hm, that completely changes how data is managed. My app needs to deal with objects in my domain, not SelectItem values. Seeing if I can adjust the existing code...

exotic citrus
honest sparrow
#

Hm, see my updates. The data props is now tied to state which is updated directly not via a useMemo, but it still has the same issue where selecting the newly created item doesn't work.

#

I think I discovered thatonChange fires after onCreate automatically, so maybe my lookup after the onChange fails because my Map doesn't yet have the new item.

#

Yep, that was the problem, race condition because of onChange being called synchronously after onCreate.