BUG: Multiselect component value doesn't reset if option is no longer available

App Building
1

Hello,
I encountered a bug with the Multiselect component.

It happens when you set the component option to mapped.
Basically if you select one option, but then this option no longer exists, the value array of the multislect will have one undefined element in it, instead of zero.

This is bad when trying to see if any option is selected (with value.length)

This are the steps to reproduce it.

  • create a multiselect component.
  • set it to mapped, instead of manual.
  • set the options to be taken from an array
  • select one of the option
  • remove the selcted option from the array
  • check the length of multiselect.value, it will be one.

Is there any workaround? Thank you very much.

2

Hi @andrea_bluelabs! This is an odd interaction that I'll create a bug report for!

Two notes:

If you enable the "allow custom values" option, the item that is no longer available in the list will stay selected in the UI so it is at least consistent with the user's expectations and they could choose to deselect it

Another potential workaround could be filtering undefined values in those conditional references you are using: multiselect1.value.filter(x => x !== undefined).length

1 Like
3

Helo @alex-w, is there any chance for this bug fixed?

The thing is, I have the same problem.

In my case, the list in the multiselect is from a query which the query is based on the multiselect's inputValue. and the query has potential to have millions data, so I want it to be populate on the run.

Example I have multiselect with data source from People, with value: Id, and label: name.
the people will only be queried when the multiselect is typed.
if the user type J in the multiselect, then I will only search people which started with j. example I add Jack, with ID j0001
when I search D for Dwight, "Jack" will be converted into j0001 on the screen, which makes our user will be confused about who is j0001.

4

Hey @DarkJoxie, stepping in for Alex here. Just to make sure I'm able to reproduce your exact issue, is it basically that multiselects whose set of values changed in the backend don't properly update if the missing values were selected before they went missing?

5

sorry for the late reply.
Yup, like that. you can reproduce using andrea_bluelabs' way.
The point is "the allow custom values" doesn't keep the caption, only the value.
Which why the problem occured.

6

Same problem. Only workaround i found was to delete the offending component and create a new one.

7

hello mdressel, I have the same exact issue (changing query keeps the value but not the label). It's not clear how you fixed it "delete the offending component and create a new one".
Could you explain better?
Thanks,
Emanuele

8

Hello Emanuele,

I simply deleted the multiselect component that was causing the bug, and created a new one instead :slight_smile:

9

We pushed a fix for this Multiselect component bug that should go live soon! For Cloud, it should be sometime this week and On Premise, it's scheduled to be released on April 20th (Version 2.117). Thank you all for surfacing this issue and please let us know if you run into any other issues! :raised_hands: