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

fix: 根据activeKey显示额外内容导致最后一个tab点击失效 #662

Merged
merged 4 commits into from
Sep 6, 2023

Conversation

Zhou-Bill
Copy link
Contributor

@Zhou-Bill Zhou-Bill commented May 18, 2023

resolve ant-design/ant-design#44632
resolve ant-design/ant-design#38270

tabBarExtraContent 如果根据 activeKey 显示时,点击 最后一个tab 时失效

iShot_2023-05-17_23.14.51.mp4

ant-design线上demo,操作顺序是 先点击折叠的Tab4, 然后点击Tab5, 继续点击Tab6
https://codesandbox.io/s/hua-dong-antd-5-4-2-forked-jp2jmf?file=/demo.tsx

或者使用当前库的demo

const items: TabsProps['items'] = [];
for (let i = 0; i < 50; i += 1) {
  items.push({
    key: String(i),
    label: `Tab ${i}`,
    children: `Content of ${i}`,
  });
}
export default () => {
  const [key, setKey] = React.useState('0');

  const extra = React.useMemo(() => {
    if (key === '0') {
      return (
        <div>额外内容</div>
      )
    } 
    return null
  }, [key])

  return (
    <div style={{ maxWidth: 550 }}>
      <Tabs 
        activeKey={key}
        onChange={(curKey) => setKey(curKey)}
        tabBarExtraContent={extra} 
        defaultActiveKey="8" 
        moreIcon="..." 
        items={items} 
      />
    </div>
  );
};

原因是: 当额外内容显示为空时,ResizeObserveronResize 没有重新触发。

@vercel
Copy link

vercel bot commented May 18, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
tabs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 6, 2023 9:50am

@codecov
Copy link

codecov bot commented Sep 6, 2023

Codecov Report

Merging #662 (f9d8a17) into master (0bce955) will not change coverage.
The diff coverage is n/a.

❗ Current head f9d8a17 differs from pull request most recent head 6c542d0. Consider uploading reports for the commit 6c542d0 to get more accurate results

@@           Coverage Diff           @@
##           master     #662   +/-   ##
=======================================
  Coverage   97.72%   97.72%           
=======================================
  Files          18       18           
  Lines         659      659           
  Branches      176      176           
=======================================
  Hits          644      644           
  Misses         15       15           
Files Changed Coverage Δ
src/TabNavList/index.tsx 95.42% <ø> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

@zombieJ zombieJ merged commit b0febf1 into react-component:master Sep 6, 2023
7 checks passed
@qdliang-sequoia
Copy link

是需要更新 ant 来修复这个问题吗,升到哪个版本可以修复

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

Successfully merging this pull request may close these issues.

Tabs 没有根据 tabBarExtraContent 的变化而重新计算可滚动的宽度 Tabs bar is not responsive
3 participants