CSS classes being lost from conditional rendering in Spring 14

  • 1
  • Problem
  • Updated 5 years ago
  • Solved
I may have found a bit of an issue with conditional rendering in Spring 14.

I have a tabset that I only want to render if a particular field is not blank. In my test, I load the page with the field containing data and the tabset displays as expected. I edit the field and remove the data and the tabset disappears as expected (bonus: without a page refresh - nice). But the elements within the tabset, notably the LI tags that define the tab labels, have lost most of their attributes, including their CSS classes.

LI tag on initial page load:

<li data-tab="skuid-component-tab-19" data-rendered="true" class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="skuid-component-tab-19" aria-labelledby="ui-id-1" aria-selected="true" style=""><a href="#skuid-component-tab-19" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1"><div class="nx-template" style="display: inline-block;">My Tab</div></a></li>

LI tag after changing the field back to non-blank:

<li data-tab="skuid-component-tab-250" data-rendered="true" style=""><a href="#skuid-component-tab-250"><div class="nx-template" style="display: inline-block;">My Tab</div></a></li>

Anyone else seen this?
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
  • temporarily down in the mouth, but confident that CR will be amazing shortly

Posted 5 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Hi Glenn,

It would probably be good to describe a little bit of how Conditional Rendering works here, to help analyze what's going on. When a component stops meeting the conditions for it to be rendered, it is "un-rendered". This means that the component's DOM element is emptied out, and its style and class attributes are "mostly" removed so that it will no longer show up in the DOM. However, it's actual element (usually a DIV) is NOT removed, it is just left there as a container.

Our idea here (there may be bugs in its implementation as this is such a new feature...) is that the shell container should remain in the DOM such that it can still be programmatically manipulated, e.g. if a Table component has a Unique Id "MyTable", you'd be able to get at it via $('#MyTable') or skuid.component.getById('MyTable') even if it is currently not rendered as far as Conditional Rendering is concerned. This would allow you to call the following methods, arbitrarily:

// Get a reference to our table component
var myTable = skuid.component.getById('MyTable');
// Force conditional rendering logic to be run on our table
// FORCE our table to be rendered.

If the component actually gets rendered, then it will be freshly, completely rebuilt --- not just "shown".

So this means that, after a component is rendered, all appropriate CSS classes, style elements, and child contents should be applied to it.

But while a component is "un-rendered", just a shell of it will remain in the DOM, and this shell is not guaranteed to have all of its style properties or class attributes.

SO, to your question...

What you are seeing above appears to be correct to me. Are your tabs not showing up the way you would expect, or are certain CSS classes / style attributes not being re-applied once the tab is rendered again?
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Hey Zach ... I hear you. The design makes perfect sense to me.

You sum up my Friday experience in your last paragraph:

"Are your tabs not showing up the way you would expect"
-- On initial page load, they displayed fine. When the condition field was then set to a value that returns false to the condition, they rightly disappeared (and I could see the stripped out "shell" in the console). Then when the field was set to a value that returns true, the tabs reappeared, but with styling lost, and I could see in the console that attributes were missing.
"... or are certain CSS classes / style attributes not being re-applied once the tab is rendered again"
-- That's exactly right. because the attributes were no longer there, the styling was lost.

However ... testing again just now, I can't recreate it! I've changed the tabset in the meantime, so that may have affected things. But in today's testing, on re-render, all the expected attributes are being reapplied and the styling works.

I'll keep monitoring it and let you know what else I can find. Thanks for confirming that