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

Developing Nodes
1

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:

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

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

Try adding a hidden input to hold state

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

            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" }
                            ]
                        }
                    ]
                });
            }
3

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.

4

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.

5

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

Ok, will do.

6

@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...

                $("#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.

7

Thank you very much! This solves my problem.

8

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