Components: [Tabs] Interrupt / Intercept tab change

[luchillo17]

Bug, feature request, or proposal:

If possible, i want to intercept tab change, i know i have the MdTabChangeEvent through MdTabGroup's selectChange binding, but it only seems to show which tab is it transitioning to, how do i stop the transition of happening?

What is the expected behavior?

I want a way to call a function, make some logic in function and then if i want, stop the tab from happening, or even change to a different tab, my case is that the last tab should be a +, and on click it should add a new tab instead of transitioning to that empty tab.

What is the current behavior?

Can't find a way to intercept the transition of tabs.

What is the use-case or motivation for changing an existing behavior?

Using tabs for a step based process, or just having a + tab made for the sole purpose of adding more tabs, not showing that tab.

Which versions of Angular, Material, OS, browsers are affected?

[email protected]

Is there anything else we should know?

Idk if it exists or it lacks the feature itself, i guess that for the moment i'll need to let it transition to the empty tab, add the new tab and then transition to the created tab.

[Daeluse]

Slightly related to #2008, if we could bind to an EventEmitter output by the tab group which provides us the current tab, and the target tab, we would then probably only need a way to stop the index from changing.

[luchillo17]

@Daeluse is basically the same, though different use cases and different ways of saying it.

[luchillo17]

Ok so i've been testing and i am able to create a tab, set the tab i want to go with selectedIndex binding, and it happens so fast that i doesn't even notice the + tab being shown, like this:

<md-tab-group
  [selectedIndex]="currentTabIndex"
  (selectChange)="tabChanged($event)"
>
  <md-tab *ngFor="let order of orders; let i = index; trackBy: trackByIndex" [label]="i + 1">
    <order
      [index]="i"
      [cashier]="cashier"
    ></order>
  </md-tab>

  <md-tab
    label="+"
    (click)="newOrder()"
  ></md-tab>

</md-tab-group>

  tabChanged(event: MdTabChangeEvent) {
    console.log('Tab Changed: ', event);
    let textLabel = event.tab.textLabel.toString();
    if (textLabel.includes('+')) {
      this.newOrder();
      this.currentTabIndex = this.orders.length - 1;
    }
    return false;
  }

However this is kind of a hack, @Daeluse what do you think about it?

[MikeMatusz]

I like the concept of a guard in #2008 (though not necessarily relying on angular/router) because you could do something asynchronous, like prompt the user, before continuing or preventing the tab change. Most tab libraries I've used have an event you can preventDefault on to stop the change, but it's messy with async because you have to stop the transition, and then start it again, suppressing your deactivate logic with some kind of state variable, if the user clicks Continue (or the async validation succeeds).

[luchillo17]

A guard is not exactly what i need, but it could work as well, intercepting the event before the animation happens is basically the same concept.

Lacking this feature limits a lot what tabs are really capable of.

[dlang117]

Any update on this? Or a workaround for actually preventing the tab index from changing?

[luchillo17]

I haven't been very active on this one since i found a hack for my use case, i just set the index after the change so fast that you never notice it has gone to the + tab & back, does that work in your use case or not?

[dlang117]

@luchillo17 It doesn't really work in my use case. I'm attempting to do something very similar to the example you posted above, but it fails to actually switch the tab even after setting the selected tab index.

[alexzuza]

@dlang117 Possible workaround can be found here

https://stackoverflow.com/questions/51354135/how-to-conditionally-prevent-user-from-navigating-to-other-tab-in-mat-tab-group/51354403#51354403

[GeekyMonkey]

That workaround can be used to prevent tab change, but you still don't have access to the previously active tab, so you don't know which one needs to be validated or saved.

[alexzuza]

@GeekyMonkey Having this.tabs.selectedIndex should help you with your requirenment since it will point to the previous tab.

this.tabs._tabs.toArray()[this.tabs.selectedIndex]

[jelbourn]

Copying my comments from another conversation here for discoverability:

We've always avoided APIs in Angular CDK/Material that allow "cancelling" actions. The reasoning:

• The accessibility of "cancelling" is tricky- it's hard to communicate to screen-reader users that the expected action didn't happen and why. This would be especially true with e.g. tabs, where it would be very easy to throw off the interaction pattern if you interrupt an expected action with a dialog.
• There's no clear line on which actions would be cancellable and which aren't from an API consistency standpoint.
• It generally makes the library code more complex and harder to reason about
• It makes any "cancellable" interaction asynchronous

This issue will stay open for conversation for now, but we don't have any plans to start adding cancellation APIs to the library.

It's worth mentioning that, if you use mat-tab-nav-bar, you can treat the pages as separate routes, so that you can use route guards.

[jelbourn]

Coming back and closing this since we don't plan on adding this type of cancel API.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}