Tab控件 会出现不能正常显示标签的现象

[huxiany]

Tab控件 会出现折叠行的标签不能正常显示的现象

SaltUI 版本

[email protected]

浏览器、操作系统等环境信息

Microsoft Edge、Chrome、Windows10

复现步骤

1. 折叠行偶尔会出现不能正常显示标签的现象，请查看 图-1

2. 新增tab后，默认显示当前新增的tab，全部类目可正常显示，但是折叠行不能正常标示

• 步骤一
  点击“新增tab”按钮后，会按照tabs.Length+1的规则（ 默认显示的tabs编号为1~11 ）新增一个tab，然后默认显示当前新增的tab，全部类目可正常显示，但是折叠行不能正常标示，结果请查看 图-2
  

• 步骤二
  当第三次新增tab（标签为14）后，切换到第一次新增的tab(标签为12)，全部类目和折叠行都显示的是12，显示都正常，请查看 图-3；当第四次新增Tab（标签为15）后，切换到第一次和第二次新增的Tab（12和13）都能正常显示，所以总是不能正常显示新增的最后两个标签。
  

• CodePen 链接

[eternalsky]

1 好像不能复现，这个 偶尔 需要明确一下复现条件。

[huxiany]

1的复现步骤：更改默认显示的tabs的个数，保存之后就会出现1的现象，比如将11改为15，如下图所示：

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[LiangZugeng]

第一个问题我们只在Microsoft Edge下出现，在Chrome中重现不了，因为SaltUI是移动端控件，所以不用花时间去看了。

针对第二个问题，我们做了个能重现的pen。

https://codepen.io/LiangZugeng/pen/YLvJzr

操作步骤：

1. 打开上面的pen，显示5个Tab.Item，1-5，默认选中第一个Item - 1
   

2. 点击“新增Tab”按钮，这时候代码会添加一个新tab.Item - 6，6会被默认选中并显示在显示区域，6下面有个蓝色的横线表示已经被选中。（此步结果正确）
   

3. 再次点击“新增Tab”按钮，这时候代码会添加一个新Tab.Item - 7，期望结果是7会自动被选中并显示出来，实际结果是Item - 7没有出现在Tab的显示区域，显示区域只显示了1-5。
   

我们测试过Tab.pageSize的属性，测试结果就是：每次添加新Tab.Item，如果数量多于pageSize+2，就会出现刚才的问题。

环境信息：

1. Windows 10 (Version 10.0.16299.431)
2. Chrome (Version 66.0.3359.139 (Official Build) (64-bit))
3. SaltUI (Version 3.8.33)

[eternalsky]

问题 2 定位是底层依赖的问题，已提 issue。react-component/tabs#121

[LiangZugeng]

有什么办法催一下那边吗？我看已经9天了，还没有人回复。

[eternalsky]

这周我再想办法催一下

[eternalsky]

根据 bug 的情况，你如果想要回避这个问题，只要给组件在不同的 tab 数量的时候，传不同的 key，强制组件卸载重新渲染，就可以规避这个问题。

[LiangZugeng]

@eternalsky 依赖组件已经更新了，SaltUI的依赖更新了吗？如果弄完了就可以关掉这个issue.

[eternalsky]

看了下，修复是在 9.2.6 的版本完成的，我们需要对应做一个升级，这周内完成。