I have a rather advanced Tab Panel Wizard that I'm working on, and I can't quite seem to get it working like how it should. Basically, I have a tab panel that has 4 tabs... each tab is its own form, as the tab needs to do validation on itself, so it can determine if it needs to disable the tabs to its right, or if the next tab should be enabled.

The main quirk that I'm running into is that a non-rendered tab thinks it's valid, when in fact, its field is set to allowBlank false, and it has an empty value. Then there's the inverse, where I have a value set, but it think it's invalid.

The other quirk is, I must call this.getViewModel().notify() when the tab panel loads... otherwise, my initial form thinks it's invalid when I check the initial validity... although, I believe this has something to do with binding and the delay, so I can deal with this for right now.

I can use deferredRender: false to solve this problem, but I don't want to because in my actual app, the tabs have quite a bit going on in each of them, so that's not very performant.

In my Fiddle, you'll see 3 tabs enabled, when in fact, it should've been 4 tabs that were enabled, as the 3rd tab has data from its model, but the tab believe it's not valid. Because the tab thinks it's invalid, it re-fires my checkValidity method because I check for isValid being false (this is to disable any tab to the right if the current tab goes invalid, and the user is forced to hit continue, which is by design). In the console:
  • Tab3 thinks it's invalid, which is not true because it's set to allowBlank: false, but it has a value bound to it
  • Tab4 will think it's valid, which is not true because it's set to allowBlank: false and has no value

Does anyone have any insight? Am I going about this terribly wrong?