Items don't render when initially hidden

[AStoker]

I'm submitting a bug report

• Library Version:
  1.0.0-beta.1.0.2

Please tell us about your environment:

• Operating System:
  OSX 10.9|iOS|Windows 10

• Node Version:
  5.5.0

• NPM Version:
  3.3.2

• JSPM OR Webpack AND Version
  JSPM 0.16.39

• Browser:
  all

• Language:
  ESNext

Current behavior:
When page loads, the virtual repeat element is contained inside a div that is hidden. Later, when that div is revealed, the virtual repeat elements do not show except for the first one (this is due to how the element heights are calculated).

Expected/desired behavior:

• What is the expected behavior?
  The expected behavior is that the elements will show appropriately, despite being hidden initially.
• What is the motivation / use case for changing the behavior?
  Motivation/use case for this scenario is in the event of a mobile first design, where certain panels are hidden on mobile, and the panels are revealed depending on where you navigate to (where as on desktop all the panels are visible).

What probably needs to happen to resolve this is figure out a different way to calculate the initial heights of elements. Currently, it depends on those elements being visible and their heights being calculate-able when everything is initialized. When this isn't the case, or when views change size, the calculate heights function is not fired again, and therefore nothing changes in the view.

[tiagogm]

This is also happening to me.

I have a custom element with a virtual-list that is hidden with show.bind initially, when the list shows, only the first element is visible.

[AStoker]

This is going to require a PR to fix until then. If you have a solution, it would be great to get it in.

[AStoker]

I'm taking a look at this one now. Have an idea I'd like to throw out to you @martingust or anybody else who comes across this issue ( @tgmorais you might have some opinions since it's impacting you too).
I'm thinking about approaches to calculate the container height and element height when they're hidden. One approach to solving this (which involves jQuery, but can be done without) is documented here: http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/.
Essentially, it get's an array of parents (of the element in question) that are hidden, and then loops through each one setting the properties to absolute positioning, display block, and visibility hidden (but saving the previous values to restore them once we're done evaluating). Once it finishes that, the element is in the DOM and has an appropriate size, but is hidden to the user. When it has finished evaluating the size of the element, it goes back through and restores the properties that were changed.

That's one approach. Another approach (which I'm not sure would work or is feasible) would be to have some kind of listener (or a setTimeout perhaps?) that would react when the element size has changed (from 0 to a positive number would be this particular case) and recalculate the sizes then. This approach would solve this issue as well as the issue of when the container is resized and the elements in view remains unchanged.

Thoughts? Ideas? Comments?

[AStoker]

Downside to approach 1 though is that by technically "removing" it from the flow of the DOM, the element's size may have changed, so it's not quite as reliable.

[martingust]

@AStoker I think 2 sounds good. If calcOuterHeight returns 0 here, keep check that value until its > 0.

[AStoker]

I'm not sure if checking this._itemsLength on that line number is going to achieve that @martingust, since that's the item count for the array, and that can have a positive number on initialization, meaning it won't catch whether or not any items have been displayed yet.

[AStoker]

My guess is that we want to actually catch it here.

[AStoker]

@martingust, how does this sound here

if (this.itemHeight <= 0) {
      this._sizeInterval = setInterval(()=>{
        let newCalcSize = calcOuterHeight(firstViewElement);
        if (newCalcSize > 0){
          clearInterval(this._sizeInterval);
          this.itemsChanged();
        }
      }, 500);
      return;
    }

What will basically happen is if the _calcInitialHeights calculates 0 for the first item, we'll set an interval for every 500ms to check the height of the first element again, and then return out of the calculate function. Inside the interval, if we finally calculate a size greater than 0, then we'll trigger the itemsChanged function, since that will recalculate both the initial heights and handle the DOM change events (to my understanding)

[martingust]

@AStoker Oops I linked to wrong line, should definitely be the one you linked. I think your implementation is good. Perhaps we should log something about height being 0, sometimes it is not on purpose.

[AStoker]

@martingust do you think it should be just a console log, error, debug? Sometimes those kinds of messages get swallowed up anyway. I'm not always inclined to put messages like that in the console because it can start to get a little cluttered.
That being said, yes, I would like it if the user could get the knowledge they needed if for some reason their views weren't showing up due to an error that was previously thrown...
Ultimately I'm game with either approach, but it should probably match whatever is being done (in regards to logging to the console) in the rest of the Aurelia libraries. Thoughts?

[martingust]

@AStoker I agree, it can definitely get cluttered with too many logs. Just that I've seen many bug reports where the real issue is that the element doesn't have an height. But lets hold off on that, we can always add that later.