Add support for array style options

[tdulcet]

This may be out of scope for this library, but it would be very useful if it supported array style options, where the user can add more than one value to an option or more than one instance of an option group. For example, consider a standard weather app/extension where the user can add multiple locations, each with a ZIP code and country. This would also be needed for any input or select elements where the multiple attribute is set.

This is currently blocking https://github.com/rugk/unicodify/issues/30.

[rugk]

Well… html=multiple only seems to work for file or email inputs, which is of course not what we'd want.

But yeah, multiple options in a kind of multi-select input would be great. However, the UI is totally missing here. There is not standard HTML component for that.

Apart from that, I don't consider it out-of-scope, it's just hard to implement technically and I never really needed it and could find other solutions, so it's not in there. If you have an idea or want/need an implementation, I'd be happy to look at PRs and better maybe discuss how we should approach/handle it, before. :smiley:

[tdulcet]

Apart from that, I don't consider it out-of-scope, it's just hard to implement technically and I never really needed it and could find other solutions, so it's not in there.

Yeah, it could require some significant JS to implement the UI.

If you have an idea or want/need an implementation, I'd be happy to look at PRs and better maybe discuss how we should approach/handle it, before. 😃

I have at least three extension ideas which would need this feature, however I think the four other issues I created are a higher priority, especially the two blocking parts of Unicodify and the Awesome Emoji Picker, although I would definitely be interested to hear how you think we could best implement this feature...

Back to my weather extension example, I was thinking developers could specify their default settings like this to indicate that they want to use array style options for an option group:

const defaultSettings = {
    locations: [
        {
            zip: "20500",
            country: "US"
        }
    ]
};

[tdulcet]

Apart from that, I don't consider it out-of-scope, it's just hard to implement technically and I never really needed it and could find other solutions, so it's not in there.

Yeah, it could require some significant JS to implement the UI.

For adding more than one instance of an option group, I implemented a simple UI using a table, which has a column for each option in the option group and a row for each instance of the option group: https://jsfiddle.net/4bafm35n/. There is also a button to convert the table to an array, to demonstrate what would be needed by this library to save the values in the table. This library would then just need run that code anytime the user modified any of the cells.

For the select elements where the mutiple attribute is set, there is a one liner here to convert that to an array: https://stackoverflow.com/a/39363742, which is what would be needed for https://github.com/rugk/unicodify/issues/30.

I'd be happy to look at PRs and better maybe discuss how we should approach/handle it, before. 😃

I would also be happy to discuss how we could best update the library to support this feature...

[rugk]

What you read sounds all goods far as for what you write. A table sounds reasonable as a HTML markup for that, though I maybe would use that in the code, but rather use classes, so you can use your own markup there (after all, maybe the options also are not supposed to be in one line/could spawn multiple lines).

So maybe it could be designed similar to how the options groups are implemented.

Instead of a string as a thing to copy for each entry/"line"/"row", it should use a HTML