IxDropdownButton's items are lost on window resize

[mertutku]

Prerequisites

• I have not leaked any internal company information.
• I have not posted internal links or code snippets.

What happened?

We are using IxDropdownButton inside of a IxTabItem. Initial load of the page, everything works right. But if we resize the page the IxDropdownButton's items are not visible anymore. This does not happen if IxDropdownButton is outside of Tabs components.

Initial state

After window resize

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

React

Which version of iX do you use?

v2.1.1

Code to produce this issue.

<IxTabs selected={selectedTab}>
        <IxTabItem>
          <IxDropdownButton
            label={"Tab Label"}
            variant="secondary"
            ghost={true}
            outline={true}
          >
            <IxDropdownItem
              label="dropdow item 1"
              onClick={() => changePage(...)}
            ></IxDropdownItem>
            <IxDropdownItem
              label="dropdow item 2"
              onClick={() => changePage(...)}
            ></IxDropdownItem>
          </IxDropdownButton>
        </IxTabItem>
      </IxTabs >

[matthiashader]

Thank you for your comments. Currently the ix-dropwdown is not intended to be used as a tab item. Alternatively, you could use a button group / move the dropdown button down (and then change the content based on the pressed button) or, if you really need nested elements like this, a tree would also be a solution.

[matthiashader]

After a discussion, we came to the conclusion that this behavior is not desired, even if it is not currently supported. We will create a bug ticket - thanks for submitting it.

[github-actions]

🤖 Hello @mertutku

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-1013, IX-1736

[mertutku]

Thank you for the response. I resolved the problem with a workaround. In case, it might help you. Basically I switched to IxDropdown instead of IxDropdownButton. And moved the IxDropdown item outside of IxTabs block.

<IxTabs>
  <IxTabItem id="triggeringTabId">
    <div>
      tabName
      <IxIcon name="chevron-down-small" class="icon size-24"></IxIcon>
    </div>
  </IxTabItem>
</IxTabs>
<IxDropdown trigger="triggeringTabId">
  <IxDropdownItem
    label="tab1"
    onClick={() => changePage(...)}
  ></IxDropdownItem>
  <IxDropdownItem
    label="tab2"
    onClick={() => changePage(...)}
  ></IxDropdownItem>
</IxDropdown>

[matthiashader]

Hello @mertutku,

We have discussed this use case previously, and unfortunately, our current implementation does not support this scenario. However, you can use the workaround we discussed.
But we would like to understand the use case behind your requirement to potentially enhance our component in the future.
Feel free to share more details or contact us directly at: [email protected].