tabarray first tab content not displayed until click away and back

[skidvd]

I am using the 1.0.0-alpha.4 version.

???

As a user/developer, when I use tabarray for definition I should be able to have first tab displayed

Expected behaviour

I expected the first tab to be displayed by default

Actual behaviour

It actually displays the first tab selector as active/chosen, but with no actual tab contents vsible. Upon clicking on another tab (or adding another value to array), and then clicking back to the first tab, the contents are correctly displayed

When using the following template:

<form name="forms.schemaForm" sf-schema="schema" sf-form="form" sf-model="model"></form>

and scope definitions:

$scope.schema = {
    "id": "/static-assets/dist/schema/messages.json",
    "$schema": "http://json-schema.org/draft-04/schema#",
    type: "object",
    "definitions": {
        "address": {
            "type": "object",
            "properties": {
                "street_address": { "type": "string", title: "Street Address" },
                "city":           { "type": "string", title: "City" },
                "state":          { "type": "string" }
            },
            "required": ["street_address", "city", "state"]
        }
    },
    properties: {
        name: {type: "string", minLength: 2, title: "Name", description: "Name or alias"},
        title: {
            type: "string",
            enum: ['dr', 'jr', 'sir', 'mrs', 'mr', 'NaN', 'dj']
        },
        dob: {type: "number", title: "DOB", description: "Date of birth"},
        subforms: {
            type: "array",
            items: {
                type: "object",
                properties: {
                    name: {type: "string"},
                    address: {"$ref": "#/definitions/address"},
                    phone: {type: "string"}
                }
            },
        }
    }
};

$scope.form = [
    "name",
    "title",
    "dob",
    {
        type: "tabarray",
        title: "{{value.name || 'Person index ' + $index}}:",
        key: "subforms",
        add: "Add person",
        remove: "Remove person",
        style: {
            add: "btn-success",
            remove: "btn-danger"
        },
        items: [
            "subforms[].name",
            "subforms[].phone",
            "subforms[].address"
        ],
        //startEmpty: false
    },
    {
        type: "submit",
        title: "Save",
    }
];

$scope.model = {
    //subforms: [
    //    {
    //        phone: '123-456-7890',
    //        address: {
    //            street_address: '123 Main'
    //        }
    //    }
    //]
};

I have experimented with supplying non-emtpy initial values in the model as well as startEmpty: false, but nothing appears to positively affect the behavior described above (empty initial tab contents until click away and back).

@json-schema-form/angular-schema-form-lead

[Anthropic]

Are you able to make a plunker to demo or have you found any indication of what code or style may be causing it?

[skidvd]

Interesting, I made a plunker (https://plnkr.co/edit/QfjzjIfvD1lcQpy7InNV?p=preview) to demo this issue. However, it works as desired in the plunker. It appears that the first tab is just not receiving the 'active' class in my main effort. Any idea what could cause that? I have swapped out all of the script includes to match those used and the plunker and still not luck - the only difference appears to be nesting of form inside other markup. Also, manually applying 'active' class via dev tools produces desired visual results. More to come, but I'd appreciate any thoughts or ideas od what may be preventing the active flag from being applied in some cases when it should be?

This is the produced markup that seemingly shout have the 'active' class, but does not? devtools confirms that both selected.tab and $index in scope are 0

<div class="clearfix index0 tab-pane tab0" sf-field-model="ng-repeat" ng-repeat="item in model['subforms'] track by $index" ng-show="selected.tab === $index" ng-class="{active: selected.tab === $index}">

[Anthropic]

@skidvd this is most common when something interrupts the final stages of the digest, can you test that by running the digest via console to see if running once more would finish the render?

[hugsbrugs]

I have version 0.8.14 and same problem of tabarray not initialized by missing active class

Very dirty workaround and proof of concept ;-)

$timeout(function(){ $rootScope.$digest(); console.log('digest'); var elements = document.getElementsByClassName('tab-pane index0'); angular.forEach(elements, function(element){ console.log('element', element); if(!element.classList.contains('active')){ element.classList.add('active'); } }); }, 2000);