# Is there a multi select dropdown widget available in the editor

**URL:** <https://discourse.nodered.org/t/is-there-a-multi-select-dropdown-widget-available-in-the-editor/51498>\
**Category:** Developing Nodes\
**Created:** [25 September 2021 07:08 UTC](https://discourse.nodered.org/t/is-there-a-multi-select-dropdown-widget-available-in-the-editor/51498 "2021-09-25T07:08:55Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [25 September 2021 07:08 UTC](https://discourse.nodered.org/t/is-there-a-multi-select-dropdown-widget-available-in-the-editor/51498/1 "2021-09-25T07:08:55Z")

</div>

Hi,

to save the some of the limited space of the config dialog I'm looking for a multi select drop down widget for the editor. (as far as I found out the`multiple` attribute only works on select lists and not dropdowns)

- Is there already a method / widget / tool available witch I can use?
- Any other idea to select multiple items without loosing at least tree rows of dialog space
- Is it ok to throw in one of the available libraries like [select2](https://select2.org/) (I really like to avoid this)
- If I need one of the libraries which one can you recommend (no styling no swiss army knife necessary)

Happy to receive any help or advice.

Chris

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/b/abedd8492b3cbb657dbf21e1289bb248562306b4.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [25 September 2021 09:16 UTC](https://discourse.nodered.org/t/is-there-a-multi-select-dropdown-widget-available-in-the-editor/51498/2 "2021-09-25T09:16:33Z")

</div>

The typedInput widget supports multiple select drop-down.

Look at the solar events on cron-plus node.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [25 September 2021 10:12 UTC](https://discourse.nodered.org/t/is-there-a-multi-select-dropdown-widget-available-in-the-editor/51498/3 "2021-09-25T10:12:48Z")

</div>

Thank you!  
So something like this line 1600+

```auto
                        {
                            value: "selected",
                            label: "Selected Solar Events", 
                            title: "Selected Solar Events", 
                            icon: "fa fa-list",
                            showLabel: false,
                            multiple: true,
                            options: solarChoices,
                            default: ["sunrise", "sunset"]
                        },

```

Great, will try this 😉 I searched [here](https://nodered.org/docs/api/ui/typedInput/) but couldn't find the 'multiple' property. Are there perhaps other hidden treasures like a [color type](https://discourse.nodered.org/t/typedinput-is-it-possible-to-add-a-color-type/49606) .... best together with with alpha value?

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [26 September 2021 10:33 UTC](https://discourse.nodered.org/t/is-there-a-multi-select-dropdown-widget-available-in-the-editor/51498/4 "2021-09-26T10:33:12Z")

</div>

A little follow up if you don't mind. Nothing I could not work around but perhaps somebody has some ideas or hints before I dig deeper

1. Works like a charm, especially I can handle the "all series" case better  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/f/af1647d9ba42f99929b71fba90079b6a2d3f9de3.png)

2. But: I get a comma separated string. Should be fine in most cases but I would prefer an array same as a list with the `multiple` flag set outputs (imagine commas in the value strings)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/4/540797262ff370a16a2353e7809e96aa72d9e0d6.png)

3. If I set this string during oneditprepare I get this:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/6/96e64344ceade419be10fad3c270c31e9dd10d8c.png)  
The title is empty but the items are set as expected.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/91644c147ff04b09420016458eb0895d063697fa.png)  
Only if i drop down the list and close it again it seams the expected "2 selected" appears  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/8/28d9b2fb7bcd56b1325a852643d5414a213975e0.png)

4. If i switch from selected series (2 selected) to all series and back i get this  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/4/b40056deb80dd9234141b1f177ca16f4f6341206.png)  
Not what I expected. Now the "title" is correct but no options are selected. Closing the dropdown gives "0 selected" and the selections are lost.

Here are my properties ... (you can ignore my uiElements object, it only handles the ui elements I use and make editable lists easier and `oneditsave` a one line job.

```auto
                            if (!data.applyTo) data.applyTo=[""];
                            uiElements.addTypedInput('applyTo',[{
                                value: "allSeries",
                                label: node._("uplot.dataPlugins.label.reduceData.allSeries"),
                                title: node._("uplot.dataPlugins.label.reduceData.allSeries"),
                                icon: "fa fa-bars",
                                hasValue: false
                            },{
                                value: "selected",
                                label: node._("uplot.dataPlugins.label.reduceData.selectedSeries"), 
                                title: node._("uplot.dataPlugins.label.reduceData.selectedSeries"), 
                                icon: "fa fa-list-ul",
                                showLabel: false,
                                multiple: true,
                                options: seriesSelect                        
                            }],data.applyTo,(data.applyTo === '') ? 'allSeries' : 'selected',contentWidth-2+'%');
    

```

And I recognize the typed input is 2% lager than expected 😉

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [26 September 2021 11:53 UTC](https://discourse.nodered.org/t/is-there-a-multi-select-dropdown-widget-available-in-the-editor/51498/5 "2021-09-26T11:53:36Z")

</div>

I should preface this by saying the multi select option of the TypedInput isn't widely used - I think we use it one place within the editor. So I'm sure there will be edge cases that it doesn't handle as well as you may expect. But equally, it can only improve by being put through its paces as you are doing.

The TypedInput widget only deals with string properties because it wraps a regular html text input. This is why it encodes the selection as a comma separated list of options.

When you set it to all series, it clears the current value - the list of selected options. When you switch back, as the value has been cleared, nothing is selected.

There is some code in the widget to handle a similar scenario (I forget the specifics) - we'd have to look at what logic makes sense here.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [26 September 2021 13:00 UTC](https://discourse.nodered.org/t/is-there-a-multi-select-dropdown-widget-available-in-the-editor/51498/6 "2021-09-26T13:00:14Z")

</div>

Thank you our detailed answer, always appreciated!

I think I can work around the "one of a kind" use case.

- Values as Stings, no problem I'm in charge of the value so I can make sure there is no comma were no comma should be.

- Switching types ... Either I find a way to via the `change( event, type, value )` event or go with the "multi select only" only version which worked flawless.

> [@knolleary](#):
>
> multi select option of the TypedInput isn't widely used

perhaps because it isn't documented? This could change now 😉 No worries, the forum forgets realy fast.

BTW: would be nice too if the list drops down as soon as the type is changed to avoid a second click on the other (right) side.

I love the typed input - lot of options, flexible, possible customization and using a minimal amount of UI real estate . Would be nice if there could be a "code" type (for callback functions) and a multi line string type (i.e. in the visual JSON editor reasonable editing is "difficult"). (not asking for a color type any more)

Enough for now! As always thank you for your support and have a nice sunday.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [29 September 2021 06:52 UTC](https://discourse.nodered.org/t/is-there-a-multi-select-dropdown-widget-available-in-the-editor/51498/7 "2021-09-29T06:52:12Z")

</div>

What I found out´ after digging deeper into the `multiselect` list feature:

The only issue I found: If the type changes the the label does not update. It should say "0 selected" when the value is set to "" and not show the last state while the internal value has changed.

This problem can be workaround:

- `oneditprepare` : I define the type first and then set the value
- for type changes I use the change event to update the value (to "" or whatever default / last value I need). The title is then updated correctly.

If a fix here is necessary the label should update "x selected" on type changes always reflect the current value.

here is my code to handle type changes while preserving the last selected. (Don't know if piggybacking the `lastSelectedValue` on the input element is ok)

```auto
                                (event, type, value) => {
                                    let element = $(event.target);
                                    let lastSelected = element.prop('_lastSelectedValue'); // recall last selection
                                    switch (type) {
                                        case 'selected': // type with multiple flag set
                                            if (lastSelected && value!==lastSelected) { // to avoid e endless loop
                                                element.typedInput('value', lastSelected);
                                            }
                                            element.prop('_lastSelectedValue',value); // remember last selection
                                            break;
                                    }
                                }

```

@Steve-Mcl in cronplus I observed the same issue if someone switch types for solar events. Either the title is empty but the two default events are selected or the title shows "x selected" when none are actually selected.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [30 September 2021 17:24 UTC](https://discourse.nodered.org/t/is-there-a-multi-select-dropdown-widget-available-in-the-editor/51498/8 "2021-09-30T17:24:04Z")

</div>

I believe I have fixed all of these issues for 2.1 - [Do better remembering TypedInput values whilst switching types by knolleary · Pull Request #3159 · node-red/node-red · GitHub](https://github.com/node-red/node-red/pull/3159)

It also does a much better job of remembering selections generally when switching between types.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [14 October 2021 17:24 UTC](https://discourse.nodered.org/t/is-there-a-multi-select-dropdown-widget-available-in-the-editor/51498/9 "2021-10-14T17:24:54Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.