duplicate key in tabs overflow menu

[rinick]

in this function, sometimes the startIndex is bigger than the endIndex, causing the menu for hiddenTabs in TabNavList to have duplicated items.
I guess some tab extra element with user defined css can cause it to measure things incorrectly.

tabs/src/hooks/useVisibleRange.ts

Lines 42 to 61 in a4ce7c4

	const len = tabs.length;
	let endIndex = len;
	for (let i = 0; i < len; i += 1) {
	const offset = tabOffsets.get(tabs[i].key) || DEFAULT_SIZE;
	if (offset[position] + offset[unit] > transformSize + mergedBasicSize) {
	endIndex = i - 1;
	break;
	}
	}
	let startIndex = 0;
	for (let i = len - 1; i >= 0; i -= 1) {
	const offset = tabOffsets.get(tabs[i].key) || DEFAULT_SIZE;
	if (offset[position] < transformSize) {
	startIndex = i + 1;
	break;
	}
	}
	return [startIndex, endIndex];

could we add a simple protection like

if (startIndex > endIndex) {
  endIndex = startIndex;
}

[rinick]

you can reproduce it in the above example.

also it only happens for 1 or 2 frames, and when you actually open the dropdown, you will never see the duplicated item.

So it might also be some timing issue between react hooks that messed up with the measuring.

[afc163]

PR is welcome

[mahileeb]

Can we get the PR merged?