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] 组件<Popover /> 随着浏览器窗口的 缩小而不见了 #2220

Open
1 task done
WeMadeCode opened this issue May 7, 2024 · 0 comments
Open
1 task done
Assignees

Comments

@WeMadeCode
Copy link

Is there an existing issue for this?

  • I have searched the existing issues

Which Component

Popover

Semi Version

^2.37.0

Current Behavior

  1. 缩小浏览器窗口
  2. Popover组件被隐藏

Expected Behavior

  1. 缩小浏览器窗口
  2. Popover不会被隐藏

Steps To Reproduce

  1. 缩小浏览器窗口
    2.Popover被隐藏

ReproducibleCode

import React, { useState } from "react";
import { Popover, Button, Empty } from "@douyinfe/semi-ui";
import {
  IllustrationSuccess,
  IllustrationSuccessDark,
} from "@douyinfe/semi-illustrations";

const portalElement = () => {
  let portalElement = document.body.querySelector<HTMLElement>(`div#hahahaha`);
  if (!portalElement) {
    portalElement = document.body.appendChild(document.createElement("div"));
    portalElement.style.position = "relative";
    portalElement.setAttribute("id", "hahahaha");
  }
  return portalElement;
};

const App = () => {
  const content = (
    <Empty
      title={"先进的设计 / 研发协作方式"}
      image={<IllustrationSuccess style={{ width: 150, height: 150 }} />}
      darkModeImage={
        <IllustrationSuccessDark style={{ width: 150, height: 150 }} />
      }
      description="使用 Semi D2C 快速还原 Figma 设计稿,一键转代码"
      style={{
        width: 400,
        margin: "0 auto",
        display: "flex",
        padding: 20,
      }}
    />
  );
  const [visible, setVisible] = useState(false);

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <h1>Hello World</h1>
      <div
        style={{
          display: "flex",
          width: "500px",
          height: "500px",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Popover
          position="top"
          visible={visible}
          content={content}
          trigger="click"
          getPopupContainer={portalElement}
        >
          <Button
            onClick={() => {
              setVisible(true);
            }}
          >
            我是按钮
          </Button>
        </Popover>
      </div>
    </div>
  );
};

export default App;

Environment

- OS: Apple M1 Pro
- browser: Chrome 124.0.6367.119

Anything else?

详情见录屏:
https://github.com/DouyinFE/semi-design/assets/29619882/aeb6f958-f761-4007-b31a-868d21fdff11

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

2 participants