TypedInput Widget Question / Bug?

Hi All, I'm using the TypedInput widget with hasValue set to true and options at the same time. In the example below I'm trying to add a number of units to a date. The odd thing is, the value for the selected option isn't showing up in typedInput('value'), all I'm getting is the number from the input field. Furthermore, I'm getting no change events when I change the unit option. I really need this to work. Any ideas?

Hi @ericbenjaminjr

You have strayed into an undocumented corner of the TypedInput, but what you want to do is possible.

The TypedInput can only store a single value. But here we have both the number the user has typed in and the units to store.

This is similar to the flow/global types when you have multiple context stores configured - and the solution is hidden away in how those types deal with it.

When you have both hasValue and options set, you need to tell the TypedInput how to combine the two things into a single value that can be stored - and also do the reverse of taking a stored value and splitting out the value and option. This is done by providing a parse and export function on your type definition.

Here's a simple example that I think will get you most of the way...

{
    value: "times",
    label: "+",
    hasValue: true,
    // `parse` function is given a stored value and should return
    // an object with `option` and `value` properties.
    // This example assumes the value is of the form `100:s`
    parse: function(v) {
        const m = /^(.+):(.+)$/.exec(v)
        if (m) {
            return {
                option: m[2],
                value: m[1]
            }
        }
        // couldn't parse the value, so return some defaults
        return {
            option: 's',
            value: 0
        }
    },
    // `export` function is given the current value and option
    // and has to return a single string that encodes them both:
    export: function (v,opt) {
        return `${v}:${opt}`
    },
    options: [
        { value: "ms", label: "ms"},
        { value: "s", label: "s"},
        { value: "mins", label: "mins"}
    ]
}

IN my local testing of that, when I add a change listener on the input, I do get all the updates when anything changes.

This is the way @knolleary :clap: Thank you so much!! And oooh I'm no stray, not anymore. It's literally my new neighbourhood. So I'm going to drop you two more questions since I have you on the line, in the hopes that I'll be able to help myself better in the future. The most important one being: I was thinking about the context fields myself. But I can't seem to be able to find the code for these things searching through the github repo. How can I find the code that drives the typedInput widget?

The second one: does the typedInput widget maintain state about its types? Calling typedInput('type') and typedInput('value') gives you the values according to their arguments respectively, but typedInput('types') gives me nothing. And I'm having to maintain state on my own. Is there anything undocumented that could help me here?

And I'd also like to express my appreciation for the hard work, humility and community near culture you and the growing Node-RED team nurture. I wish you all the blessings, growth and prosperity you deserve!

Works like a charm, thanks again! :smiling_face_with_three_hearts:

1 Like

The source of TypedInput is here: https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/editor-client/src/js/ui/common/typedInput.js

All of the built-in types are defined around line 168.

Right - there is no 'getter' for the types - you can only set the list of types.

1 Like

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