Ref value is not accurate in nested mount

I was getting strange results from calling getBoundingClientRect() on a ref value after mounting, the element’s height was always 0. However, when logging the value inside a timeout, it seems to return the actual height. Stranger still is this only happens in nested components.

Nested mount

import { createElement, mount } from 'forgo';

const List = () => {
  let ref = {};

  return {
    mount: () => {
      console.log(ref.value.getBoundingClientRect()); // 0
      setTimeout(() => console.log(ref.value.getBoundingClientRect()), 0); // 927
    },
    render: () => (
      <div style="overflow: auto; flex-grow: 1" ref={ref}>
        <div style="position: relative; min-height: 0">
          <div style="position: absolute">Hello world</div>
        </div>
      </div>
    )
  }
};

const App = () => {
  return {
    render: () => (
      <div style="display: flex; flex-direction: column; min-height: 100vh">
        <List />
      </div>
    )
  };
};

mount(<App />, document.getElementById('mount'));

“Flat” mount

import { createElement, mount } from 'forgo';

const App = () => {
  let ref = {};

  return {
    mount: () => {
      console.log(ref.value.getBoundingClientRect());
      setTimeout(() => console.log(ref.value.getBoundingClientRect()), 0);
    },
    render: () => (
      <div style="display: flex; flex-direction: column; min-height: 100vh">
        <div style="overflow: auto; flex-grow: 1" ref={ref}>
          <div style="position: relative; min-height: 0">
            <div style="position: absolute">Hello world</div>
          </div>
        </div>
      </div>
    )
  };
};

mount(<App />, document.getElementById('mount'));

[spiffytech]

I’ve adapted your code into a reproduction in a sandbox. It’s a different issue than #50.

The order of events looks like:

1. Forgo starts rendering Parent
2. Forgo sees Parent includes Child
3. Forgo renders Child
4. Forgo calls mount() on Child
5. Forgo sets the style attr on Parent’s elements

Since Child’s elements won’t be sized correctly without Parent actually being a flex container, you see the height 0 until forgo completes its render (i.e., until after the setTimeout completes).

Forgo needs to be adjusted to call syncStateAndProps() prior to rendering child components. But because of the way forgo stores state or DOM elements, we might need to split up the state sync and props sync into separate steps.

I started working on a failing unit test for this. JSDOM doesn’t set meaningful values in the return value for getBoundingClientRect(), but I think we can assert on the timing of the parent’s attr set (which is the root cause anyway).

[spiffytech]

This has been released in Forgo v3.2.0.