[BUG] Tabs组件启用折叠,新增或者删除tab后如果右侧仍留有空间,右侧按钮会先active再disabled,看起来就像闪了一下
yupaits opened this issue · comments
yupaits commented
Is there an existing issue for this?
- I have searched the existing issues
Which Component
Tabs
Semi Version
2.55.2
Current Behavior
No response
Expected Behavior
No response
Steps To Reproduce
当前版本使用官网上Tabs示例就能复现
ReproducibleCode
No response
Environment
- OS:
- browser:
Anything else?
No response
YyumeiZhang commented
复现demo
export const Test111 = () => {
const [num, setNum] = useState(6);
const [tabList, setTabList] = useState([
{ tab: '文档', itemKey: '1', text: '文档', closable: true },
{ tab: '快速起步', itemKey: '2', text: '快速起步', closable: true },
{ tab: '帮助', itemKey: '3', text: '帮助',closable: true },
{ tab: '文档1', itemKey: '4', text: '文档4', closable: true },
]);
const close = useCallback((key) => [
setTabList((tabList => {
return tabList.filter(t=>t.itemKey!==key)
}))
], []);
const add = useCallback(() => {
setNum((num) => num+1);
setTabList((tabList => {
return [...tabList,
{
tab: `文档${num +1}`,
itemKey: `${num +1}`,
text: `文档${num +1}`,
closable: true,
}
]
}))
}, [num])
return (
<>
<Button onClick={add}>新增</Button>
<Tabs type="card" defaultActiveKey="1" onTabClose={close} collapsible style={{ width: 400 }}>
{
tabList.map(t=><TabPane closable={t.closable} tab={t.tab} itemKey={t.itemKey} key={t.itemKey}>{t.text}</TabPane>)
}
</Tabs>
</>
);
}
YyumeiZhang commented
@YannLynn 有空 cc