Controlled MultiSelect Acting Up

[patrickml]

For some reason when using a controlled multiselect the cursor in the input field gets all sort of messed up. And the values are not removed when you add a tag. https://cl.ly/0E1P0h2h1a1t

code

<MultiSelect
   placeholder="Select Roles"
   options={system && SystemAndRoles[system].map(valueToOptions) || []}
   values={roles && roles.map(valueToOptions) || []}
   disabled={!!!system}
   filterOptions={filterOptions}
   onValuesChange={(options) => sendChange('roles', options.map(o => o.value))}
   transitionEnter
   transitionLeave
   tether
/>

[furqanZafar]

Not entirely sure about the big picture there, Not able to reproduce the issue here: http://codepen.io/furqanZafar/pen/bZaBBa

[patrickml]

@furqanZafar I know I am getting a lot of event.persist() errors do you think it could have something to do with that? I know there has been a change for that, that hasn't been pushed to NPM.

[furqanZafar]

Try release 2.0.3 though I doubt that was causing any serious issues

[patrickml]

@furqanZafar testing 2.0.3 did fix #80 but it did not help here sadly.

[patrickml]

Update So as seen in the video if i type in Admin it isn't removed from the input -- i just noticed that if i click outside of the component it will then be removed? Any ideas?

[furqanZafar]

Not sure, could you make a pen or fiddle reproducing this issue?

[patrickml]

I am wondering if its an issue similar to the React Input issue where when the controlled input is controlled by an outside state i.e. a store and passed as props the cursor moves. For more context I am using the FLUX arch. And storing all the changes in a store which this components parent is subscribed to.

[nikkipurcell]

I had a similar issue when using the multiselect advanced tags example. In my case the search text was not initially removed from the input when it was added. I'd have to click out of the input to clear it. Adding the uid function (unique id) to the multiselect component solved the issue. I overlooked that but it's in the documentation. I wonder if that will help any with your issue?

[thombuchi]

Thanks nikkipurcell I was having the exact same issue and was trying to fix it using the search and onSearchChange options (with a strange behavior).. but adding the uid function fixed all.

[patrickml]

@nikkipurcell i am basically haveing that same issue i just tried to add the uid use this as a prop uid={(o) => o.value + system} but it didnt seem to work @nikkipurcell @thombuchi what did you do for your uid?

[thombuchi]

I just used uid={(item) => return item.value} and all started working like a charm.

[gergely-ujvari]

Can somebody explain that on what depends if the search is cleared after selecting an element from the drowdown list on the MultiSelect component?

I'm using 2.0.3 and I have a MultiSelect component for which there is a predefined option list but you can also create new "tags" and everything is working well, except that when I type in some characters into the searchbar and then select an option from the menu (or create a new tag) the search doesn't get cleared.

I tried to debug it, but I only found out that here: https://github.com/furqanZafar/react-selectize/blob/master/src/ReactSelectize.ls#L504 the @props.values does not contain the newly added tag so that find is bound to fail.

I also tried using the uid property but didn't solve it.

[gergely-ujvari]

Ok, I found out what was my problem. Adding the initial values triggered this behavior. There is a contradiction between the documentation and the examples. For the Multiselect API it says it has a defaultValues property but all the examples use the values property instead which is also working but triggers this side-effect I explained above.

[patrickml]

@gergely-ujvari if you use defaultValues are you still able to clear the values via state?

[gergely-ujvari]

No, not always for some strange reasons. Using backspace to clear an item from the search bar works fine, but I also wanted to add a little x button to all tags to be able to clear them with a click (like in the emoji example) but that doesn't work with defaultValue.

[stizzlestizzle]

These comments finally helped me to get my MultiSelect working correctly. I wanted to have an "X" to remove options onClick as shown in the emoji example and as mentioned in several issues here.

I added a renderValues function. For me it only worked after using values instead of defaultValues. This is not well documented so I wasted a lot of hours on tracking this down.

I would suggest providing a better documentation/example for this use case. I feel a lot of people want to have a standard MultiSelect with an X button on each option.

[jamesob]

FWIW I was seeing same behavior as OP and it was fixed (as suggested previously) by adding

uid={(i) => i.label}

to the component invocation.