Form Builder / Picker - not working with array of objects as items

[Tomasz-Zlamaniec]

Hexagon version: 1.6.0

Expected

Picker should allow picking items that are not strings but objects.

Actual

When items are objects, then picker displays them correctly and allows selecting items from the drop-down list but after an item is selected the displayed item is not updated (instead the first item is always shown as selected). When trying to submit the form, the validation will fail saying that the picker value must be selected (if the value is 'required').

Example

var fileTypeRenderer = (node, data) => hx.select(node).text(data.myValue);

var items = [{
    myKey: 1,
    myValue: "Value 1"
}, {
    myKey: 2,
    myValue: "Value 2"
}];

var form = new hx.Form('#addItemFormPlaceholder')
    .addPicker("Picker example", items, {required:true, key:"myKey", pickerOptions: {renderer:fileTypeRenderer}})
    .addSubmit("Submit", 'fa fa-check');

After selecting "Value 2" and clicking "Submit" the displayed value is still "Value 1" and validation error is shown: The same happens without key:"myKey"

[charlieTheBotDev]

As far as I can tell, the Picker expects an object with at least a value property which is used to determine what the value of the object should be for the picker (this doesn't seem to be documented). In addition, if you use text as the property name for the text string, you don't need the renderer:

var items = [{
    value: 1,
    text: "Value 1"
}, {
    value: 2,
    text: "Value 2"
}];

var form = new hx.Form('#addItemFormPlaceholder')
    .addPicker("Picker example", items, {required:true, key:"myKey"})
    .addSubmit("Submit", 'fa fa-check');

The key in this case is what the form stores the property when getting the data and isn't used by the picker.

I'm not sure if this is something we need to change (i.e. by adding some kind of valueLookup to the picker) but you should be able to work with the above whilst we work out what we want to do

Edit: At the very least, we need to document the picker better when using objects as values

[Tomasz-Zlamaniec]

Thanks, having it documented would help (the documentation still mentions Selector rather than Picker). The example worked after adding value.

If the problem with selecting was caused by lack of 'value' then a fail-fast exception could be useful as well, or even better Hexagon could wrap provided object and use order as values automatically. From my point of view as a lazy developer I'd like to pass any array of objects as items (with either text or renderer) and in form.on('submit', function(formData) I'd like to get my original object rather than value (I think that this is the case now, even if value is set. This way I could get data from the server, add picker to the form, and post an update in on submit without having to do any foreach and without keeping a mapping between generated values and my objects.

[charlieTheBotDev]

I've had a think about this and the best way to resolve the issue would be to add some kind of valueLookup (that matches how we've done similar lookups in other modules) that is used purely for getting the value of an item.

This would retain the circular nature of the value getter/setter and let you structure the objects however you want.