Multiselect Input Problem

Ask us anything How do I?
1

I have a multiselect input dropdown that is bound to a collection “Instructions”.

image
image1586×948 95.2 KB

Initial value of the multiselect input dropdown is an array variable (SelectedPost.Instructions)

I had a more complex workflow for the dropdown but to narrow down this problem now I only have one step (change the variable value with what’s in the “multiselect input - current selection”):

image
image3634×1036 332 KB

The problem I am facing is when I try to add a new one-time tag, and then I remove that tag, I start seeing duplicates of it in the drop down. How to stop the duplicates from happening?

image
image1976×644 31 KB

I don’t want to save these tags into the database, I just need it for this particular instance, i don’t need it in the dropdown next time…

2

Are you adding new values to the options of the dropdown? It seems to me that you’re changing the list on the fly, no?

3

Hey Quentin!

Use case: I am trying to allow users to add their own one-time tags, or they can choose from a pre-defined list of tags.

So I have 5 pre-defined options for example, (the dropdown is binded to a collection with 5 items).

I have enabled “allow to create option” in the settings of this multiselect element.

If I use any of the 5 options, no problem.

However, when I try to add an option, and then remove it, that’s when I start seeing duplicates in the dropdown (when it should just disappear).

Hope this makes sense! :slight_smile:

4

When the input value is changed are you updating the variable list the input is bound to via a workflow?

5

Yes!

To recap:

Multiselect input dropdown’s “initial value” is bound to an array variable “selectedPost.Instructions” (which is the selected list of tags).

Multiselect input dropdown’s “options” value is bound to a collection of pre-defined tags.

To answer your q:

There is also a workflow, on change of the multiselect dropdown element, change the variable value of “selectedPost.Instructions”.

image
image1380×392 57.7 KB

So not sure what I am doing wrong…

6

can you try using a little javascript here. basically, you’d keep their input as an option BUT remove it from the currently selected items only.

// Access the global variables
const testOptions = [the variable that holds your options];
const testSelections = [this references the multiselects current selection variable];

// Create a new array to store the updated test options
const updatedTestOptions = [...testOptions];

// Iterate through test selections
testSelections.forEach(selection => {
  // Check if the selection is not in test options
  const isMissing = !testOptions.some(option => option.value === selection);

  // If the selection is missing, add it to the updated test options
  if (isMissing) {
    updatedTestOptions.push({ key: selection, value: selection });
  }
});

// Return the updated test options
return updatedTestOptions;
7

Hey Jared! I tried doing that but the duplicate problem still exists.

Here’s how I added it into the workflow and what happens when I test it (cool beans 9 and cool beans 10 are not in the pre-defined tag collection):

image
image1920×779 93 KB

image
image1918×624 39.8 KB

8

to note, the code probably wont work as expected if your key names dont match mine.

in my object i use key names ‘key’ and ‘value’. both keys get the same value which is that objects option to be displayed to the user.

9

Hey Jared!

When you try to delete “add something” after adding it in (not clearing the whole thing, but just the new tag), do you see a duplicate in the dropdown? That’s the problem I am facing.

Could I have that first code you put in step 1 for “TEST selections”? I will try using that!

I’m assuming the code in step 2 is already above. :slight_smile: I will try to repeat your whole set up haha