# Multiselect Input Problem

**URL:** <https://community.weweb.io/t/multiselect-input-problem/2959>\
**Category:** How do I?\
**Created:** [June 6, 2023, 3:35am UTC](https://community.weweb.io/t/multiselect-input-problem/2959 "2023-06-06T03:35:31Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\
**Post date:** [June 6, 2023, 3:35am UTC](https://community.weweb.io/t/multiselect-input-problem/2959/1 "2023-06-06T03:35:31Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/aeb4562928f87b93a801320c6c6526ec82d30609.png)

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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/ca3c9c2e439065a83c85ee3984383890d4c44fbb.png)

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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/a7174db148d0e3bd0bd14d4d8049f1ba0c15f66c.png)

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…

---

<div class="post-metadata">

**Author:** ![Quentin](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/quentin/32/6_2.png) [@Quentin](https://community.weweb.io/u/Quentin)\
**Post date:** [June 6, 2023, 8:47am UTC](https://community.weweb.io/t/multiselect-input-problem/2959/2 "2023-06-06T08:47:30Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\
**Post date:** [June 6, 2023, 9:53am UTC](https://community.weweb.io/t/multiselect-input-problem/2959/3 "2023-06-06T09:53:39Z")

</div>

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! 🙂

---

<div class="post-metadata">

**Author:** ![jaredgibb](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jaredgibb](https://community.weweb.io/u/jaredgibb)\
**Post date:** [June 6, 2023, 11:56am UTC](https://community.weweb.io/t/multiselect-input-problem/2959/4 "2023-06-06T11:56:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\
**Post date:** [June 6, 2023, 12:27pm UTC](https://community.weweb.io/t/multiselect-input-problem/2959/5 "2023-06-06T12:27:32Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/7c9aca8290e1295744404f5a7cf025a5ff202000.png)

So not sure what I am doing wrong…

---

<div class="post-metadata">

**Author:** ![jaredgibb](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jaredgibb](https://community.weweb.io/u/jaredgibb)\
**Post date:** [June 6, 2023, 2:10pm UTC](https://community.weweb.io/t/multiselect-input-problem/2959/6 "2023-06-06T14:10:41Z")

</div>

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.

```auto
// 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;

```

---

<div class="post-metadata">

**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\
**Post date:** [June 6, 2023, 2:47pm UTC](https://community.weweb.io/t/multiselect-input-problem/2959/7 "2023-06-06T14:47:27Z")

</div>

> [@jaredgibb](#):
>
> ```auto
> // 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;
> 
> ```

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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/66a0608affac695b455ced38259a2a00d486037b.jpeg)

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1a34580be36a74355028ae4db1567fcbc6f0edaf.png)

---

<div class="post-metadata">

**Author:** ![jaredgibb](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jaredgibb](https://community.weweb.io/u/jaredgibb)\
**Post date:** [June 6, 2023, 3:34pm UTC](https://community.weweb.io/t/multiselect-input-problem/2959/8 "2023-06-06T15:34:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\
**Post date:** [June 7, 2023, 2:54am UTC](https://community.weweb.io/t/multiselect-input-problem/2959/9 "2023-06-07T02:54:26Z")

</div>

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. 🙂 I will try to repeat your whole set up haha