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

与antd5配合使用,从离屏切换到前台,挂载的popup内容都会闪烁一下 #5

Open
minisola opened this issue Feb 18, 2024 · 2 comments

Comments

@minisola
Copy link

例如使用select组件时,先点击激活一下select,再toggle离屏后重新切换回来,select的弹出框都会闪烁一下,不知道应该如何处理

在sample里加入select就可以复现,详情可看
https://codesandbox.io/p/sandbox/nameless-paper-l884x2?file=%2Fsrc%2FApp.tsx

@IVLIU
Copy link
Owner

IVLIU commented Feb 18, 2024

image 如图下拉框的dom,是不在Offscreen作用域下的,可以设置getPopupContainer属性来使得其置于Offscreen作用域内

@minisola
Copy link
Author

我尝试了设置getPopupContainer让它挂载到上级节点,保证他可以作用域下,但是并没有作用,是我理解有误吗?
https://codesandbox.io/p/sandbox/nameless-paper-l884x2?file=%2Fsrc%2FApp.tsx%3A37%2C46

import { useState } from "react";
import { Offscreen } from "./OffScreen";
import { Select, ConfigProvider } from "antd";
import "./styles.css";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <ConfigProvider
      getPopupContainer={(triggerNode) => {
        if (triggerNode) {
          return triggerNode.parentNode as HTMLElement;
        }
        return document.body;
      }}
    >
      count: {count}
      <Select
        options={[
          {
            label: "a",
            value: "a",
          },
        ]}
      />
      <button onClick={() => setCount((count) => count + 1)}>add</button>
    </ConfigProvider>
  );
}

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      <button onClick={() => setShow((show) => !show)}>Toggle</button>
      <p>无 OffScreen</p>
      {show && <Counter />}
      <p>有 OffScreen</p>
      <Offscreen mode={show ? "visible" : "hidden"}>
        <div className="popup-container">
          <Counter />
        </div>
      </Offscreen>
    </div>
  );
}

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