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

[ToolbarButton with Menu]: Menu is briefly rendered in wrong place when conditionally rendered #10187

Open
1 task done
Lukas742 opened this issue Nov 15, 2024 · 4 comments · May be fixed by #10955
Open
1 task done
Assignees
Labels
bug This issue is a bug in the code Medium Prio TOPIC RD

Comments

@Lukas742
Copy link
Collaborator

Lukas742 commented Nov 15, 2024

Bug Description

This is a followup issue to this one and was noted by @gitgdako in this post.

When the Menu is conditionally rendered (typical in React) the Menu pops up in the top left corner before it snaps to the opener when opened.

2024-11-15_09-33-02.mp4

Affected Component

No response

Expected Behaviour

No response

Isolated Example

https://stackblitz.com/edit/github-8upxfb-ndn9tp?file=index.html,main.js

Steps to Reproduce

  1. Go to StackBlitz
  2. Open the Menu by clicking the button
  3. See that it's briefly rendered at the start of the Toolbar.

In case it's not reproducible, you can throttle your CPU in the dev tools to make the issue more prominent.

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.4.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

  • I’m not disclosing any internal or sensitive information.
@Lukas742 Lukas742 added the bug This issue is a bug in the code label Nov 15, 2024
@dobrinyonkov
Copy link
Contributor

Hello colleagues,

Please check this menu/popup issue. This seems to reproduce without the toolbar as well.
Example: https://stackblitz.com/edit/github-8upxfb-zd2pkd?file=index.html,main.js

  1. Open the Menu by clicking the button
  2. See that it's briefly rendered at the start of the Toolbar.

Kind Regards,
Dobrin

@veithlukas
Copy link
Contributor

Hello, can you give us an update to that issue?
After migrating on WC 2.0 every popover flickers when it gets opened. Please give us a timeline for a fix for this issue.

BR Lukas

@TeodorTaushanov
Copy link
Member

Hello @Lukas742,

If you're dynamically creating a menu, popover, or any other popup, you can try opening it in the next tick. In your case, you can use:

setTimeout(() => {
     menu.open = true;
});

Best,
Teo

@github-project-automation github-project-automation bot moved this from New Issues to Completed in Maintenance - Topic RD Feb 25, 2025
@TeodorTaushanov
Copy link
Member

@Lukas742, I'm reopening the issue because we're exploring a potential solution that won't involve using setTimeout.

@github-project-automation github-project-automation bot moved this from Completed to In Progress in Maintenance - Topic RD Feb 26, 2025
@TeodorTaushanov TeodorTaushanov self-assigned this Feb 26, 2025
@TeodorTaushanov TeodorTaushanov linked a pull request Feb 26, 2025 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug This issue is a bug in the code Medium Prio TOPIC RD
Projects
Status: In Progress
Development

Successfully merging a pull request may close this issue.

6 participants