typedInput with optgroup

Core Development Feature Requests
,
1

I am working on some updates on one of my Nodes.

I have created a list of options for my type.


Nodes.push({
    value: `ZWJS-LOC:${location}`,
    label: `${location.toUpperCase()}`,
});

const input = $('#node-input-filteredNodeId');
input.typedInput({
    type: 'nodes',
    types: [{
        value: 'nodes',
        multiple: true,
        options: Nodes,
    }]
});

I have a need to create separators.

Screenshot 2026-09-05 at 15.29.46
Screenshot 2026-09-05 at 15.29.46505Ă—197 14.3 KB

Now, I am managing this with some very hacky methods (I am not happy with my self)
so, I'll ask:

is there a native way to do this with typedInput using a custom list of options.

  • I,e using some type of optgroup support?

I couldn't see anything in docs, but understand this can sometimes be outdated

2

You can use the icon property to inject HTML content, just like the conf-types type does. But I don't know if you'll be able to get the desired final result.

3

Thanks - but not sure that is what I am after..
I just need a way to create groups of options (at least a separator) - where that separator is not selectable and that it is not used in the final serialised value that is stored.

4

Indeed :confused: I'll look into a way to integrate it.

Something like:

// options =
Array<{ value: string; label: string; group?: string }>
// or
Array<{ value?: string; label: string; group?: Array<{ value: string; label: string }> }>
5

Its based on this...

$("#node-input-example5").typedInput({type:"fruit", types:[{
    value: "fruit",
    multiple: true,
    options: [
        { value: "apple", label: "Apple"},
        { value: "banana", label: "Banana"},
        { value: "cherry", label: "Cherry"},
    ]
}]})

I have used it for a while.
Problem is, this doesn't seem to support optgroup, so something like

$("#node-input-example5").typedInput({type:"foods", types:[{
    value: "foods",
    multiple: true,
    options: [

        { value: "apple", label: "Apple", group: "Fruit"},
        { value: "banana", label: "Banana", group: "Fruit"},
        { value: "cherry", label: "Cherry", group: "Fruit"},

        { value: "twix", label: "Apple", group: "Chocolate"},
        { value: "chomp", label: "Banana", group: "Chocolate"},
        { value: "Curley-wirly", label: "Cherry", group: "Chocolate"},
    ]
}]})

Screenshot 2026-09-05 at 16.19.58
Screenshot 2026-09-05 at 16.19.58576Ă—403 20 KB

I think will be a great upgrade?

Note: Im going to move this to an FR.

6

Yep :winking_face_with_tongue:

The question is: can the appearance of the separator be customized? The data format will depend on this. Using custom optgroup.

7

I think if this is seen as an accepted feature.
one should denote that the options are grouped?

$("#node-input-example5").typedInput({type:"foods", types:[{
    value: "foods",
    multiple: true,
    grouped: true, /* <-- Here */
    options: [

        { value: "apple", label: "Apple", group: "Fruit"},
        { value: "banana", label: "Banana", group: "Fruit"},
        { value: "cherry", label: "Cherry", group: "Fruit"},

        { value: "twix", label: "Apple", group: "Chocolate"},
        { value: "chomp", label: "Banana", group: "Chocolate"},
        { value: "Curley-wirly", label: "Cherry", group: "Chocolate"},
    ]
}]})

Example...

Devs might group certain options - but not all.

grouped:true

  • Options are only visible if they have a group

grouped:false | undefined

  • group is ignored - A flat list
8

+1 for groups!

When working on version 3 of CronPlus, I went hunting in the source code for group support after finding that separators were not a thing.

If anyone does pick this up, I would hope that on top of group support, it would add simple line separator support too.