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.

Sign up for GitHub

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

Jump to bottom

Controlled Dropdown component rendered at wrong position #47152

Open
hotzenklotz opened this issue Jan 25, 2024 · 5 comments · May be fixed by react-component/trigger#447
Open

Controlled Dropdown component rendered at wrong position #47152

hotzenklotz opened this issue Jan 25, 2024 · 5 comments · May be fixed by react-component/trigger#447
Labels
Inactive unconfirmed

Comments

@hotzenklotz
Copy link

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  • Add a antd <Dropdown> as acontrolled React component to your app. Configure the dropdown to trigger on right-click, aka "contextMenu" (trigger={["contextMenu"]}).
  • Trigger the dropdown to open as a controlled component through the open prop (e.g. open={isOpen})
  • Dropdown menu is rendered at the top left corner of the screen (0,0), partially outside of the screen

What is expected?

The dropdown menu is supposed to open at the location of the component's DOM position or parent

What is actually happening?

The Dropdown menu is rendered at the top left corner of the screen (0,0), partially outside of the screen

image
Environment Info
antd 5.13.2
React 16 & 18
System MacOS 14.0
Browser Chrome 120.0.6099.199
  • I can reliably trigger the bug by configuring the dropdown to trigger on right-click, aka "contextMenu" (trigger={["contextMenu"]}). The bug does not happen with trigger={"click"}.
  • The bug only occurs if you have never triggered the Dropdown with a right-click. It must be triggered as a controlled component through the open prop.
@hotzenklotz hotzenklotz mentioned this issue Jan 25, 2024
Merged
14 tasks
@MadCcc
Copy link
Member

MadCcc commented Jan 31, 2024

In your scenario, I recommend you to use trigger click instead of contextMenu. contextMenu need mouse position, which not exist when first clicking the button.

@hotzenklotz
Copy link
Author

Unfortunately, switching to click is not possible for me. I want to open a right-click context menu. For discoverability / UX we also show a little ... (three dot) overflow menu icon to trigger the <Dropdown> menu.

Here is a screenshot from our web app. Right-clicking on the tree items ("Segment 123") opens the <Dropdown> menu and clicking the ... icons should also trigger the Dropdown as a controlled components through the open props.
image

This flow works without issues in antd v4.

@philippotto
Copy link

@MadCcc Any chance that there is a fix or workaround for this issue? 🙏 As mentioned above, this used to work in antd v4. I think, instead of a default position of (0, 0), the position of the <Dropdown> child should be used.

@afc163
Copy link
Member

afc163 commented Mar 8, 2024

@philippotto PR is welcome~

@philippotto philippotto linked a pull request Mar 8, 2024 that will close this issue
Open
@philippotto
Copy link

Alright ;) react-component/trigger#447

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Inactive unconfirmed
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix popup position for point-aligned popups when no mouse position is known scalableminds/trigger
4 participants
@afc163 @hotzenklotz @philippotto @MadCcc