Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Tabs组件启用折叠,新增或者删除tab后如果右侧仍留有空间,右侧按钮会先active再disabled,看起来就像闪了一下 #2145

Open
1 task done
yupaits opened this issue Apr 1, 2024 · 2 comments
Assignees

Comments

@yupaits
Copy link

yupaits commented Apr 1, 2024

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
Copy link
Collaborator

复现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
Copy link
Collaborator

@YannLynn 有空 cc

@YannLynn YannLynn self-assigned this Apr 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants