ix-tab "select" logic not working

[marvingreeven]

Prerequisites

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

What happened?

In our application we have a guard which decides if we can switch the application or stay on that site, whether there are unsaved changes. When we click on a ix-tab-item we have a function, like in the example, but have a check for pending changes before we set the selectedTab.

However we can see that we do not set the selectedTab parameter, but still the new tab is selected and displayed as active.

We have tried the other approaches like "tabClick" or "click", "selected" on ix-tab-item and "selectedChange" function. But the outcome is the same.

In the code example you can see that the content stays on index=1 but the wrong tab is selected.

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

Angular

Which version of iX do you use?

v2.6.1

Code to produce this issue.

https://stackblitz.com/edit/gr28jqt2?file=src%2Ftabs.ts

[danielleroux]

Currently the ix-tab-item has a dedicated tabClick-event, with help of this event you should be able to cancel the default behaviour of the selection e.g:

<ix-tab-item (tabClick)="changeTab($event, 0)">Tab 1</ix-tab-item>

changeTab(event: Event, tabIndex: number) {
    event.preventDefault();
    // only if there are no pending changes, or the user forces the change in a popup, we want to navigate
    if (!this.pendingChanges) {
      // this code is not beeing executet! But IX is still setting the new IX-tab-item to active?
      this.selectedTab = tabIndex;
    }
    console.log('Selected Tab: ' + this.selectedTab);
  }

We will also include the native click event to handle "preventDefault" better.

[github-actions[bot]]

🤖 Hello @marvingreeven

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-2295

[github-actions[bot]]

Thank you for creating this issue! It has been labeled as Contribution welcome 👨‍💻. This issue is open for contributions from the community.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort. Thank you!

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[kathrinschalber]

This issue was fixed in v3.0!