# Issue with the TypedInput widget ("Select multiple items from a list of options" variant)

**URL:** <https://discourse.nodered.org/t/issue-with-the-typedinput-widget-select-multiple-items-from-a-list-of-options-variant/66476>\
**Category:** Developing Nodes\
**Created:** [16 August 2022 08:47 UTC](https://discourse.nodered.org/t/issue-with-the-typedinput-widget-select-multiple-items-from-a-list-of-options-variant/66476 "2022-08-16T08:47:27Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![MoonDev](https://avatars.discourse-cdn.com/v4/letter/m/bbce88/32.png) [@MoonDev](https://discourse.nodered.org/u/MoonDev)\
**Post date:** [16 August 2022 08:47 UTC](https://discourse.nodered.org/t/issue-with-the-typedinput-widget-select-multiple-items-from-a-list-of-options-variant/66476/1 "2022-08-16T08:47:27Z")

</div>

Hello,

I'm having an issue with the TypedInput widget in the "Select multiple items from a list of options" variant. The Problem is when I initially open the edit page of my node the dropdown shows e.g. "4 Selected" which is the correct number of selected options. After the dropdown opens and closes without changing the selection the string changes to "0 Selected".  
I'm not sure if this is a bug or if I'm doing something wrong in my code.

Anyone else who experienced something similar or can help with this issue?

Thanks in advance!

test.js:

```auto
module.exports = function (RED) {
    "use strict";

    function TestNode(config) {
        RED.nodes.createNode(this, config);
        this.lines = (config.lines || "").split(",").filter(Boolean);

        this.on("input", function (msg, send, done) {
            send(msg);

            // Once finished, call 'done'.
            done();
        });
    }
    RED.nodes.registerType("test-node", TestNode);
};

```

test.html

```auto
<!-- Test Node -->
<script type="text/html" data-template-name="test-node">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
    </div>

    <div class="node-row-lines">
        <div class="form-row">
            <label for="node-input-zone">Test selection</label>
            <input type="text" id="node-input-test" style="width: 300px;">
        </div>
    </div>
</script>

<script type="text/javascript">
    (function () {

        RED.nodes.registerType("test-node", {
            category: "Test",
            color: "#FFFFFF",
            defaults: {
                name: { value: "" },
                test: { value: "0,1,2,3" },
            },
            inputs: 1,
            outputs: 1,
            label: function () {
                return this.name || "Test node";
            },
            labelStyle: function () {
                return this.name ? "node_label_italic" : "";
            },
            oneditprepare: function () {
                $("#node-input-test").typedInput({
                    types: [
                        {
                            value: "test",
                            multiple: "true",
                            options: [
                                { value: 0, label: "Test 0" },
                                { value: 1, label: "Test 1" },
                                { value: 2, label: "Test 2" },
                                { value: 3, label: "Test 3" }
                            ]
                        }
                    ]
                });
            }
        });
    })();
</script>

```

---

<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:** [16 August 2022 09:43 UTC](https://discourse.nodered.org/t/issue-with-the-typedinput-widget-select-multiple-items-from-a-list-of-options-variant/66476/2 "2022-08-16T09:43:40Z")

</div>

Try adding a hidden input to hold state

```auto
    <div class="node-row-lines">
        <div class="form-row">
            <label for="node-input-zone">Test selection</label>
            <input type="hidden" id="node-input-testType"> <!-- ← add this -->
            <input type="text" id="node-input-test" style="width: 300px;">
        </div>
    </div>

```

```auto
            oneditprepare: function () {
                $("#node-input-test").typedInput({
                    typeField: $("#node-input-testType"), // ← add this  
                    types: [
                        {
                            value: "test",
                            multiple: "true",
                            options: [
                                { value: 0, label: "Test 0" },
                                { value: 1, label: "Test 1" },
                                { value: 2, label: "Test 2" },
                                { value: 3, label: "Test 3" }
                            ]
                        }
                    ]
                });
            }

```

---

<div class="post-metadata">

**Author:** ![MoonDev](https://avatars.discourse-cdn.com/v4/letter/m/bbce88/32.png) [@MoonDev](https://discourse.nodered.org/u/MoonDev)\
**Post date:** [16 August 2022 10:19 UTC](https://discourse.nodered.org/t/issue-with-the-typedinput-widget-select-multiple-items-from-a-list-of-options-variant/66476/3 "2022-08-16T10:19:21Z")

</div>

Thanks for the suggestion but the behaviour is still the same.

By the way when I close the edit page and open it up again the label on the dropdown shows the correct number of selected options. So storing of the selections seems fine.

---

<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:** [16 August 2022 10:30 UTC](https://discourse.nodered.org/t/issue-with-the-typedinput-widget-select-multiple-items-from-a-list-of-options-variant/66476/4 "2022-08-16T10:30:56Z")

</div>

What version of Node-RED are you using? I remember there was a bug like this a few releases ago. If you're on 3.x, then please raise an issue.

---

<div class="post-metadata">

**Author:** ![MoonDev](https://avatars.discourse-cdn.com/v4/letter/m/bbce88/32.png) [@MoonDev](https://discourse.nodered.org/u/MoonDev)\
**Post date:** [16 August 2022 12:03 UTC](https://discourse.nodered.org/t/issue-with-the-typedinput-widget-select-multiple-items-from-a-list-of-options-variant/66476/5 "2022-08-16T12:03:47Z")

</div>

> [@knolleary](#):
>
> What version of Node-RED are you using? I remember there was a bug like this a few releases ago.

It's v3.0.2 but the issue was also present in v2.2.2 that I used before.

> [@knolleary](#):
>
> If you're on 3.x, then please raise an issue.

Ok, will do.

---

<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:** [17 August 2022 09:43 UTC](https://discourse.nodered.org/t/issue-with-the-typedinput-widget-select-multiple-items-from-a-list-of-options-variant/66476/6 "2022-08-17T09:43:52Z")

</div>

@MoonDev I do not see the same issue as you do with my own nodes - I now realise it is because you are using number values instead of string.

This works...

```auto
                $("#node-input-test").typedInput({
                    default: "test",
                    types: [
                        {
                            value: "test",
                            label: "",
                            icon: 'fa fa-list',
                            showLabel: true,
                            multiple: true,
                            options: [
                                { value: "0", label: "Test 0" },
                                { value: "1", label: "Test 1" },
                                { value: "2", label: "Test 2" },
                                { value: "3", label: "Test 3" }
                            ]
                        }
                    ]
                });

```

I am unsure as to the actual design intent for the option `value` field at this time, but for now, using strings will get you a solution.

---

<div class="post-metadata">

**Author:** ![MoonDev](https://avatars.discourse-cdn.com/v4/letter/m/bbce88/32.png) [@MoonDev](https://discourse.nodered.org/u/MoonDev)\
**Post date:** [17 August 2022 10:09 UTC](https://discourse.nodered.org/t/issue-with-the-typedinput-widget-select-multiple-items-from-a-list-of-options-variant/66476/7 "2022-08-17T10:09:14Z")

</div>

Thank you very much! This solves my problem.

---

<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:** [16 October 2022 10:09 UTC](https://discourse.nodered.org/t/issue-with-the-typedinput-widget-select-multiple-items-from-a-list-of-options-variant/66476/8 "2022-10-16T10:09:46Z")

</div>

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