[Tabs] 切换Tab的width会报错 toggling the Tab element width cause error

yigallim commented 3 months ago

Reproduction link

Steps to reproduce

In this simple code, when you toggle the width of the Tab by clicking the "Toggle" button, an error will occur (note that you may need to click several times for the error to occur).

当你点“Toggle”按钮来切换 Tab 的宽度时，看控制面板会有报错（注意，有时需要单击多次才会发生错误）。

Sample Code 案例代码

import React from "react";
import ReactDOM from "react-dom/client";
import { useState } from "react";
import { Button, Tabs } from "antd";
import { Typography } from "antd";

const items = [
  { label: "Tab 1", key: "1" },
  { label: "Tab 2", key: "2" },
  { label: "Tab 3", key: "3" },
  { label: "Tab 4", key: "4" },
  { label: "Tab 5", key: "5" },
  { label: "Tab 6", key: "6" },
  { label: "Tab 7", key: "7" },
  { label: "Tab 8", key: "8" },
  { label: "Tab 9", key: "9" },
  { label: "Tab 10", key: "10" },
  { label: "Tab 11", key: "11" },
  { label: "Tab 12", key: "12" },
  { label: "Tab 13", key: "13" },
  { label: "Tab 14", key: "14" },
  { label: "Tab 15", key: "15" },
];

const App = () => {
  const [open, setOpen] = useState(true);

  const toggle = () => {
    setOpen((prev) => !prev);
  };

  return (
    <>
      <Typography.Text>
        Keep clicking the Toggle button, then check the console, error will occur
      </Typography.Text>
      <br />
      <Typography.Text>一直按Toggle， 查看控制面板，会有报错</Typography.Text>
      <br />
      <br />
      <Button onClick={toggle}>Toggle</Button>
      <Tabs
        size="small"
        type="editable-card"
        items={items}
        style={{
          transition: "300ms",
          position: "absolute",
          top: 140,
          left: 0,
          right: open ? 300 : 0,
        }}
      />
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Error occured 报错

What is expected?

I don't expect any error to occur, this is just a normal usage.

What is actually happening?

The error is likely to cause by transition. when you remove the [ transition: "300ms" ], everything is normal again, the error will not occur anymore. I also suspect the issue was caused by Dropdown component inside right section of Tab, but i was not able to reproduce the error just only with Dropdown.

当你把transition拿走 [ transition: "300ms" ], 就好像有没问题，也不报错了。也有可能是 Dropdown 组件的问题，但是我不知道要怎么把这个问题从 Dropdown 挖出来。