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: nested trigger arrow position #46294

Merged
merged 1 commit into from Dec 24, 2023
Merged

Conversation

bestlyg
Copy link
Contributor

@bestlyg bestlyg commented Dec 6, 2023

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Workflow
  • Other (about what?)

🔗 Related issue link

💡 Background and solution

公司里有一个代码,因为历史遗留原因,必须要使用嵌套popover,且内部的popover的挂载节点不是body上,而是外部的popover下面的一个div,我尝试着抽离出了一个demo:

import React from "react";
import { Popover, Button } from "antd";

const App: React.FC = () => {
  const domRef = React.useRef<any>();
  return (
    <Popover
      content={
        <>
          <div ref={domRef}></div>
          <Popover
            getPopupContainer={() => domRef.current}
            title="prompt text"
            placement="top"
            trigger="click"
            content={<span>Tooltip will show on mouse enter.</span>}
          >
            <span>Tooltip</span>
          </Popover>
        </>
      }
      title="Title"
      trigger="click"
      placement="bottomLeft"
    >
      <Button>Click me</Button>
    </Popover>
  );
};

export default App;

其中,外部的placement时bottomLeft的,内部的是top的。
此时就会发生内部的arrow指向有问题:
image
我认为这是不合理的,top的arrow却出现了bottom的arrow样式,每一个trigger只应该影响他当前的trigger arrow样式就够了。

📝 Changelog

Language Changelog
🇺🇸 English Fixed arrow pointing issue when nesting triggers.
🇨🇳 Chinese 修复嵌套trigger时的arrow指向问题。

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

Copy link

stackblitz bot commented Dec 6, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link
Contributor

github-actions bot commented Dec 6, 2023

Preview Is ready

Copy link

codesandbox-ci bot commented Dec 6, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2ef91dc:

Sandbox Source
antd reproduction template (forked) Configuration

@afc163
Copy link
Member

afc163 commented Dec 6, 2023

@MadCcc 看看

@bestlyg
Copy link
Contributor Author

bestlyg commented Dec 24, 2023

hi, 我看到这个PR已经被approved了,但是还未合并,请问是有哪里有问题嘛?

@kiner-tang kiner-tang merged commit 0ef7923 into ant-design:master Dec 24, 2023
60 of 61 checks passed
@zombieJ zombieJ mentioned this pull request Dec 30, 2023
16 tasks
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.

None yet

3 participants