Ellipsis overflow button appearance flickers

[irahopkinson]

There are two CSS settings when used together that cause this issue: tabs take all the space; and hide tab group overflow button when the button is not needed. The CSS looks like this:

/* tabs take all the space */
.dock-layout .dock-nav-list {
  flex-grow: 1;
}
.dock-layout .dock-tab {
  flex: 1 0 auto;
}

/* Hide tab group overflow button when the button is not needed */
.dock-layout .dock-nav-operations-hidden {
  display: none;
}

When you resize panels, the code can't always decide if it should show the ellipsis overflow button as shown here:

I've created this CodeSandbox to demonstrate the issue.

I've created another CodeSandbox with a patch that alleviates the issue by debouncing the appearance of the button but it doesn't completely solve it as you can see in the CodeSandbox (however, this patch was sufficient for my use).

I haven't created a PR to fix it here because the issue is in the dependency rc-tabs, which in the latest rc-dock (v3.2.18), rc-tabs is at v11.16.1. However, the latest rc-tabs is at v12.10.0 so a PR there won't help rc-dock. Besides the code there in v12 has changed enough for me to think the issue may have already been fixed (the relevant code is in useVisibleRange and where it's called in TabNavList). An upgrade to the latest rc-tabs would be a good first start to fixing this and may be sufficient.