Material: md-tab: md-on-select triggers during initialization

[ninad-d]

angular-material v1.0.5
I am rendering multiple md-tab using ng-repeat and I am setting the md-selected using a variable.
My issue is as soon as the md-selected is set the md-on-select event is fired. The issue is why the md-on-select gets triggered when I am assigning md-selected via code. Isn't the md-on-select suppose to fire only when I manually select a tab.
Please find the code for reference.

<md-tabs ng-if="vm.tileInfo.dropdowns!==undefined" md-dynamic-height md-border-bottom md-center-tabs="false"  md-selected="vm.selectedButton">
  <md-tab ng-repeat="tab in vm.tileInfo.buttons.labels"
              label="{{tab}}"
              md-on-select="vm.onTabSelect()"><!--vm.tileInfo.selectedButton = $index-->
              <md-tab-label ng-click="vm.onTabClicked()"><span ng-click="vm.onTabClicked()">{{tab}}</span></md-tab-label><!--md-active="$index===vm.selectedButton?true:false"-->
  </md-tab>
</md-tabs>

here the onTabSelect() function is triggered as soon as the rendering is finished. Is it because the I am specifying the md-selected attrib?

Update even if i remove the md-selected attribute, the md-on-select is still triggering my function.

<md-tabs ng-if="vm.tileInfo.dropdowns!==undefined" md-dynamic-height md-border-bottom md-center-tabs="false"  >
  <md-tab ng-repeat="tab in vm.tileInfo.buttons.labels"
              label="{{tab}}"
              md-on-select="vm.onTabSelected()"><!--vm.tileInfo.selectedButton = $index-->
              <md-tab-label ng-click="vm.onTabClicked()"><span ng-click="vm.onTabClicked()">{{tab}}</span></md-tab-label><!--md-active="$index===vm.tileInfo.selectedButton?true:false"-->
  </md-tab>
</md-tabs>

Can some one tell me if I am messing up something over here?

[infomofo]

I am also encountering this issue. Even stranger, it always seems to be selecting tab 0, even if md-selected refers to a different tab index

[ninad-d]

infomofo can you give more details about the md-selected issue. Mine selects the right tab when I specify and index value in md-selected. The only issue that I face is the md-on-select gets triggered when I rendered the md-tabs.

[topherfangio]

Currently, the tabs watch the selected index for changes and call the md-on-select callback whenever it changes, so it's currently designed to do it whether it's a click or programmatic, and in general, I think that is the best approach.

What does your vm.onTabSelected() function do that is causing issues?

[ninad-d]

@topherfangio sorry for the late reply got stuck something in else. So here is the case I have two pages the first one is selection page where you have three buttons and on click of these button you navigate to the second page where you have the tabs. Now the which tab is selected is based on which button have you clicked on the first page. So if I click second button on first page the second tab must be selected while displaying the second page. Which button is clicked is stored in a service.
vm.onTabSelected resets the selected option by user to undefined in the service.
Also I circumnavigated the issue by using the following code,

<md-tabs ng-if="vm.tileInfo.dropdowns!==undefined" md-dynamic-height md-border-bottom md-center-tabs="false"  md-selected="vm.tileInfo.selectedButton">
  <md-tab ng-repeat="tab in vm.tileInfo.buttons.labels"
              label="{{tab}}"
              md-on-select="vm.tileInfo.selectedButton = $index">
              <md-tab-label ng-click="vm.onTabClicked()">
                <span ng-click="vm.onTabClicked()">{{tab}}</span></md-tab-label>
   </md-tab>
</md-tabs>

Instead of using the default event I added my own via ng-click="vm.onTabClicked()". So for now I have suppressed the call.

[gigablox]

+1 Running into this as well

[topherfangio]

@ninad-d @gigablox Can one of you please provide the following information per our new process? it would definitely help us track this down.

_It's probably easiest if you just copy/paste this info by clicking the New Issue button above and add it as a new comment here; you don't need to actually create a new issue._

Actual behavior:

• What is the issue? *
• What is the expected behavior?

CodePen or Steps to reproduce the issue: *

• CodePen Demo which shows your issue :
• Details:

Angular Versions: *

• Angular Version:
• Angular Material Version:

Additional Information:

• Browser Type: *
• Browser Version: *
• OS: *
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[ninad-d]

Actual behavior:

• What is the issue? *
  md-on-select gets called on setting the index via code.
• What is the expected behavior?
  md-on-select should get called only when there is physical interaction with the tabs.

CodePen or Steps to reproduce the issue: *

• CodePen Demo which shows your issue :
  http://codepen.io/ninadd/pen/grEwbR
• Details:
  When running the code kindly open up the console to see the output.
  I am setting the selectedIndex variable via code and for that the md-on-select gets called.

Angular Versions: *

• Angular Version:1.4.8
• Angular Material Version:1.0.8

Additional Information:

• Browser Type: Chrome
• Browser Version: 50.0.2661.94m
• OS: Windows 7 x64, Win 8.1 X64
• Stack Traces:

@topherfangio please do let me know if you need any more info.

[topherfangio]

I'm not sure I agree with your assessment of "md-on-select should get called only when there is physical interaction with the tabs."

I believe the intention was that it would be called whenever the tab was selected; either physically with a click/touch or programatically. I think the best option would be for your code to keep track of the selected index to see if it changes.

Also, your codepen uses the md-selected attribute of the <md-tabs> directive, not the md-on-select attribute of the <md-tab> directive. Which one are you intending to use?

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.