Conflict between tabarray and ng-animate, caused by a known bug in angular

[patriziotufarolo]

Bug

Hi everybody

I am using angular-schema-form with angular-schema-form-bootstrap, and I am managing my form through the tab array template provided in this package. When using ng-animate in the Angular.JS project, an insidious problem occurs with the tabarray: the form fields within the tab are not displayed until the "add" button is clicked.

Expected behaviour

I expect them to be shown.

Actual behaviour

The form fields within the tab are not displayed until the "add" button is clicked.

Gist/Plunker/Demo

Link to the plunkr

Related issues

This is related to (https://github.com/angular/angular.js/issues/10811)

Other info

As you can see editing the Plunker, the problem can be solved importing the bootstrap decorator inside "angular-schema-form". The one in this repo is bugged. One can also disable ng-animate.

How to solve the problem

The problem as described in the Angular issue provided above, exists when one uses ng-animate and specifies more than one interpolated value in the "class" attribute of an element, in conjuction of ng-class. In this particular situation ng-class is never evaluated. This is the case of: /0.2.0/src/tabarray.html where we have

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

Here there are two interpolated variables inside "class" (selected.tab and $index), and ng-class is never evaluated. So the tab-pane doesn't get the active class, that gives to it display:block over the default "display:none". I suggest you to remove the tab{{selected.tab}} in order to solve the problem. I'll send a pull request to do it. After doing that everything will work fine (I have already tested it locally).

Best regards,

Patrizio Tufarolo @json-schema-form/angular-schema-form-bootstrap-lead

[Anthropic]

@patriziotufarolo Hi Patrizio I made a comment in the PR, happy to accept, I've already been changing this whenever I find them in the decorator. Once I have alpha 3 ready I will try to push the version of bootstrap decorator compatible as well.

Sorry for not monitoring this correctly, I have added the angular-schema-form-bootstrap-lead group now.