ix-tab "select" logic not working

[marvingreeven]

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

🤖 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]

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!