ix-menu-category dynamic items are not visible #1606

piotretm · 2024-12-06T13:59:09Z

Prerequisites

I have read the Contributing Guidelines.
I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

In our sidenav menu, we have a list of favorite items (ix-menu-category). Users can modify this and the list should be instantly updated. However, if the list is expanded and the user tries to add more than one item they are not visible.

I think the issue might be related to the fact that you set a fixed max-height on that element during animation.

There is a code snippet based on the example for 2nd navigation level. To see the issue:

expand the menu,
expand the 'Top level Category',
add multiple items by clicking the 'Add item' button a few times,
only the first item will be visible.

What type of frontend framework are you seeing the problem on?

JavaScript

Which version of iX do you use?

2.6.0

Code to produce this issue.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Menu category example</title>
    <link rel="stylesheet" href="./menu-category.css" />
  </head>
  <body>
    <ix-application force-breakpoint="lg">
      <ix-menu>
        <ix-menu-item home icon="home">Home</ix-menu-item>
        <ix-menu-item icon="globe">Normal Tab</ix-menu-item>
        <ix-menu-category label="Top level Category" icon="rocket">
          <ix-menu-item icon="globe">Nested Tab</ix-menu-item>
          <ix-menu-item icon="globe">Nested Tab</ix-menu-item>
        </ix-menu-category>
      </ix-menu>
      <ix-button>Add item</ix-button>
    </ix-application>

    <script type="module">
      (async () => {
        await window.customElements.whenDefined('ix-menu');
        const menu = document.querySelector('ix-menu');
        const category = document.querySelector('ix-menu-category');
        const button = document.querySelector('ix-button');

        menu.breakpoints = ['medium'];

        button.addEventListener('click', () => {
          const item = document.createElement('ix-menu-item');
          item.icon = 'globe';
          const newContent = document.createTextNode('Nested Tab');
          item.appendChild(newContent);
          category.append(item);
        });
      })();
    </script>
    <script type="module" src="./init.js"></script>
  </body>
</html>

The text was updated successfully, but these errors were encountered:

github-actions · 2024-12-16T08:12:54Z

🤖 Hello @piotretm

Your issue will be analyzed and is part of our internal workflow.
To get informed about our workflow please checkout the Contributing Guidelines

JIRA: IX-2202

piotretm added the triage We discuss this topic in our internal weekly label Dec 6, 2024

matthiashader added type: bug Something isn't working Workflow: Issue created JIRA issue is created and will be analyzed and removed triage We discuss this topic in our internal weekly labels Dec 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ix-menu-category dynamic items are not visible #1606

ix-menu-category dynamic items are not visible #1606

piotretm commented Dec 6, 2024

github-actions bot commented Dec 16, 2024 •

edited by matthiashader

Loading

ix-menu-category dynamic items are not visible #1606

ix-menu-category dynamic items are not visible #1606

Comments

piotretm commented Dec 6, 2024

Prerequisites

What happened?

What type of frontend framework are you seeing the problem on?

Which version of iX do you use?

Code to produce this issue.

github-actions bot commented Dec 16, 2024 • edited by matthiashader Loading

github-actions bot commented Dec 16, 2024 •

edited by matthiashader

Loading