Not all tabs are always rendered in a tabset

I believe this is related to a certain DOM structure which I haven’t been able to nail down yet. What I do see is that TabSet.updateVisibleTabs is called after mount but this component has not yet been given a non-empty (0, 0, 0, 0) rect. When render is called on TabSet, it still has this.hideTabsAfter as 0 even this, when render is called, the rect has been correctly set on the TabSetNode.

So between didMount (where updateVisibleTabs is called) and render the rect is set correctly but updateVisibleTabs is not set when the rect is updated. I have a temporary workaround but it’s not suitable for a PR as I’m sure there is a more elegant way to resolve this

const TabSet = require('flexlayout-react/lib/view/TabSet').TabSet;

// the tabset doesn't get it's dimensions depending on the container dom
// this patch ensures that it gets the correct dimensions (and renders the appropriate tabs)
function patchFlexLayout() {
  const _render = TabSet.prototype.render;
  TabSet.prototype.render = function() {
    if (!this.updatedAfterVisible) {
      const rect = this.props.node.getRect();
      if (rect.width > 0) {
        this.updatedAfterVisible = true;
        this.recalcVisibleTabs = true;
        this.updateVisibleTabs();
      }
    }
    return _render.call(this);
  };
}
patchFlexLayout();

[nealus]

Hi Joe, I was able to recreate the issue and have added a fix in 0.3.10

[jhudson8]

@nealus FWIW I ended up experiencing another bug after I added the monkey patch listed in the description where sometimes this.toolbarRef was undefined. I’m not quite sure why that would be happening but I did have to also add this to completely resolve my issue

    TabSet.prototype.updateVisibleTabs = function () {
      if (this.toolbarRef.current) {
        _updateVisibleTabs.call(this);
      }
    };