[Popover]: Warning: Prop `aria-controls` did not match. Server: x Client: y

[kelaikelai]

Which Component 出现bug的组件

• Popover

semi-ui version

• 2.3.1

Expected result 期望的结果是什么

• 将 randomid 改为序列式 id

Actual result 实际的结果是什么

• Warning: Prop aria-controls did not match. Server: x Client: y

Steps to reproduce 复现步骤

• Child 会被自动添加 aria-controls 属性，为 content 的 wrapper 的 id

Reproducible code 复现代码

import { Button, Popover } from "@douyinfe/semi-ui";
import { IconApps } from "@douyinfe/semi-icons";
import { useState } from "react";

const WarningDemo = () => {
  const [visible, setVisible] = useState(false);
  return (
    <Popover visible={visible} content={<></>} trigger="custom">
      <Button
        icon={<IconApps size="extra-large" />}
        theme="borderless"
        type="tertiary"
        onClick={() => setVisible(true)}
      />
    </Popover>
  );
};

export default WarningDemo;

Additional information 补充说明

• 场景：为图标按钮增加一个 popover 扩展菜单

dependencies:

• "next": "12.0.10"
• "react": "17.0.2"
• "react-dom": "17.0.2"

devDependencies:

• "@douyinfe/semi-ui": "^2.3.1"
• "@douyinfe/semi-icons": "^2.3.1"
• "@douyinfe/semi-next": "^2.3.1"

[pointhalo]

@shijiatongxue seems that this issue has been fixed a long time ago, but the version number of the fix and the close issue are not updated here ?