Initial value for select field in add item doesn't render dependent field

[DSoa]

There are a number of issues with adding an object to an array. One is #118. This one relates to dependent field rendering.

I have a field called "type" that can have the value "string", "boolean", etc. I have a dependent field called "values" that should render when type is set to "string". I've included an example below.

Bug 1: On the first Add Item, it renders the "type" field and sets the value to "string", but the "values" field is not rendered. Note that emptySelectFirst should be set to false by default so "type" should not have a value at all. Setting this option explicitly does not help.

Bug 2: Trying to work around this I tried adding an empty string as the first value in the enum. Then if the user selects "string", the dependent field is rendered. Great! But the user can then select the empty value from the dropdown and the dependent field doesn't go away. Behind the scenes, the "type" field still has the value "string"! Uncomment the custom validator and you'll see what's happening. Note the first time it reports the value is null, not the empty string.

Bug 3: The custom validator is called multiple times for the same field. Also, when you try to select another tab in your browser (I'm using Chrome), the validator is called again.

Here's the example:

$(document).ready(function() {
    Alpaca.logLevel = Alpaca.DEBUG;
    var json = {
            "data": {
            },
            "schema": {
                "type": "object",
                "title": "Alpaca Bug",
                "properties": {
                    "fields": {
                        "title": "Array",
                        "type": "array",
                        "items": {
                            "type": "object",
                            "properties": {
                                "type": {
                                    "title": "Type",
                                    "required": true,
                                    "enum": [
                                             //"", // Uncomment this for Bug 2
                                             "string",
                                             "boolean",
                                             "number",
                                             "email",
                                             "url",
                                             "phone",
                                             "address",
                                             "file",
                                             ]
                                },
                                "values": {
                                    "title": "Values",
                                    "type": "array",
                                    "items": {
                                        "type": "string",
                                    },
                                    "dependencies": "type"
                                }
                            }
                        }
                    },
                },
            },
            "options": {
                "renderForm": true,
                "form": {
                    "buttons": {
                        "submit": {},
                        "reset": {}
                    }
                },
                "fields": {
                    "fields": {
                        "itemLabel": "Field",
                        "toolbarSticky": true,
                        "fields": {
                            "item": {
                                "fields": {
                                    "type": {
                                        "emptySelectFirst": true, // This has no effect
                                        // Uncomment this for Bug 2 and 3
                                        /*
                                        "validator": function(control, callback) {
                                            var controlVal = control.getValue();
                                            alert("validator: value="+controlVal);
                                            if (controlVal == null || controlVal == "") {
                                                callback({
                                                    "message": "Invalid value (custom validator)",
                                                    "status": false
                                                });
                                            } else {
                                                callback({
                                                    "message": "Valid value (custom validator)",
                                                    "status": true
                                                });
                                            }
                                        }
                                        */
                                    },
                                    "values": {
                                        "itemLabel": "Value",
                                        "size": 20,
                                        "dependencies": {
                                            "type": "string",
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
    };
    $("#form").alpaca({
        data: json.data,
        schema: json.schema,
        options: json.options,
        ui: 'jquery-ui',
        view: 'VIEW_JQUERYUI_CREATE_LIST'
    });
});

[Xaraxia]

+1

I have had to stop using 'required' just to create the "None" value to force people to manually select an option so that the dependencies work correctly. Given that 90% of the time my original default should be correct, this is frustrating for users (and of course messes with my validation). I've been digging through the javascript for a while, and as far as I can tell the dependencies require an onchange event which isn't fired for the initial document. Is there some way to fire that event for initial selects?

[Xaraxia]

Further to the above, if you use defaults for the select and enable "required", it will show a validation error until you click another option and then go back to the default. You cannot even click on the same option again to clear it because it is an onchange event rather than onclick. This is very confusing to users, and in my opinion makes 'required' unusable on select boxes unless you also set showMessages to false.

[memory]

+1 -- this appears to still be an issue, a year later.

[gsaadeh]

Still an issue !

[SuperSeb92]

A workaround for this is to use conditional dependences (and set as true)

[gsaadeh]

Thanks for your response. Do you have a sample?

[tkhanna42]

I couldn't figure out what @SuperSeb92 meant, so I found another workaround using postRender: http://www.alpacajs.org/docs/api/callbacks.html

Refering to your above code, I would place the following in the postRender:

// I select the select input with:
var typeInput = control.childrenByPropertyId["type"];

// and then select the first option it initially with:
$('[name="type"]').data = typeInput.selectOptions[0].value;

[madze]

I found another workaround that seems to work, by using the 'default' property and then refreshing the dependent field in the postRender callback:

alpacaFormData.postRender = function(alpacaControl){alpacaControl.getControlByPath('dependent_field').refresh()}