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: remove no longer needed z-index for root menu-bar items #7743

Merged
merged 1 commit into from
Sep 3, 2024

Conversation

web-padawan
Copy link
Member

Description

Fixes #7489

The code related to z-index was originally added when creating vaadin-menu-bar for Vaadin 14 due to the problem of handling clicks on root level menu items - see vaadin/vaadin-menu-bar#69. The issue about vaadin-menu-bar-button consuming clicks was apparently caused by native <button> with position: absolute used by V14 vaadin-button.

However, since in Vaadin 22 we changed <vaadin-button> to not use native <button> internally, these styles are no longer needed. Furthermore, removing them resolves the Firefox issue (which unfortunately can only be tested manually at the moment), so it seems like this rendering bug is a combination of container-type: size and z-index properties.

Type of change

  • Bugfix

Note

I confirmed that z-index: 1 is still needed in V14 to allow clicks on root level items with the following example:

<vaadin-menu-bar></vaadin-menu-bar>

<script type="module">
  import '@vaadin/menu-bar';

  const anchor = document.createElement('a');
  anchor.setAttribute('href', 'https://example.com');
  anchor.textContent = 'Example';

  document.querySelector('vaadin-menu-bar').items = [
    {
      component: anchor,
    },
  ];
</script>

Copy link

sonarcloud bot commented Sep 3, 2024

@web-padawan web-padawan merged commit d8ae511 into main Sep 3, 2024
9 checks passed
@web-padawan web-padawan deleted the fix/menu-bar-remove-z-index branch September 3, 2024 12:00
@vaadin-bot
Copy link
Collaborator

Hi @web-padawan and @web-padawan, when i performed cherry-pick to this commit to 24.3, i have encountered the following issue. Can you take a look and pick it manually?
Error Message:
Error: Command failed: git cherry-pick d8ae511
error: could not apply d8ae511... fix: remove no longer needed z-index for root menu-bar items (#7743)
hint: After resolving the conflicts, mark them with
hint: "git add/rm ", then run
hint: "git cherry-pick --continue".
hint: You can instead skip this commit with "git cherry-pick --skip".
hint: To abort and get back to the state before "git cherry-pick",
hint: run "git cherry-pick --abort".

@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 24.5.0.beta2 and is also targeting the upcoming stable 24.5.0 version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[menubar] Icon from one menubar bleeds into overlay of another menubar
3 participants