Tab 'leaking' though to SelectFieldSet

[pwiegers]

Hi,

first of all I would like to thank you for this amazing library. I know it is a fork of existing code, but still... :-)

I have been trying to get the following to work: a array, with in it a fieldselectset. This is (a simplyfied) test-JSON:

{ schema: { Vragen: { type: "tabarray", items: { type: "object", title: "Vragen", properties: { Type: { title: "Type antwoord:", type: "string", "enum": ["Decimalen", "Formule", "Financieel"] }, Decimalen: { type: "string", title: "Decimalen" }, Formule: { type: "tabarrary", items: { type: "object", title: "Formule", properties: { Naam: { type: "string", title: "Naam" }, Definitie: { type: "string", title: "Definitie" } } } }, Financieel: { type: "string", title: "Financieel" }, Tekst: { type: "string", title: "Tekst" }, BerekeningC: { type: "string", title: "Berekening antwoord" }, Feedback: { type: "string", title: "Feedback" }, Lengte: { type: "string", title: "Lengte invoervlak", "enum": ["input-mini", "input-small", "input-medium", "input-large", "input-xlarge", "input-xxlarge"] } } } } }, form: [ { type: "tabarray", key: "Vragen", items: [ { type: "section", legend: "{{idx}}.", items: [ { key: "Vragen[].Type", type: "selectfieldset", items: [ { key: "Vragen[].Decimalen" }, { type: "tabarray", key: "Vragen[].Formule", items: [ { type: "section", legend: "{{idx}}. {{value}}", items: [ { key: "Vragen[].Formule[].Naam", valueInLegend: true }, { key: "Vragen[].Formule[].Definitie" } ] } ] }, { key: "Vragen[].Financieel", type: "hidden" } ] } ] } ] } ] }

(If you throw this in the playground, it should work.)

This shows the issue: if you make at lest 2 elements in the array, if you select the second tab, it will "under water" always select the second choice in the fieldselectset. It will not show in the select box, but it will show the second fields associated with that selection. This of course, is wrong. (If you browse back and forth you will see it flipping back all the time.)

I have been spending some days trying to fix this now, but I think I lack JS-knowledge :-) I can see what goes wrong (I think, anyway). The change of tab triggers this code:

var activate = function (element, container) [line 178]

In there, the .find('> .active') will deactiveate all the children and active the X-th one. This includes the select-items in the select-box for the SelectFieldSet... I've tried to remedie this by limiting the depth of the > find by doing this:

  var activate = function (element, container) {
      container
          .children('.tab-pane, .active')
          .removeClass('active');
      container
          .children().children('.tab-pane, .active')
          .removeClass('active');
      container
          .children().children().children('.tab-pane, .active')
          .removeClass('active');
      element.addClass('active');
  };

But that this is no solution... Can you help me? I thought also it might be because the data-idx-tags are the same, but I am not sure how they might be involved...?

Thanks for any help you might be able to offer,

Paul

[ulion]

Fixed in the dev branch, please try the new code (line 205 update)

[pwiegers]

Brilliant! I can confirm this fixes the issue I saw. Thank you!