Material: tabs: md-no-select-click does not behave as intended

[coldshine]

As it stated in the docs of md-no-select-click

When enabled, click events will not be fired when selecting tabs

I want to turn this feature on. But it looks like setting this attribute to true in md-tabs directive doesn't make any changes.

I've checked the source code.
It looks like this attribute involved here only
https://github.com/angular/material/blob/3b59b202637114f660ac4177c4512d49c1372df8/src/components/tabs/js/tabsController.js#L340

So if I want this condition to be true I have to set canSkipClick to true as well.
How can I do this?

[csdenboer]

+1

[rhautefeuille]

indeed, md-no-select-click is not working

[Splaktar]

I created a demo for this. But the use case is pretty contrived. If anyone else can supply a demo with a real world use case, that would be helpful.

This is certainly seems to be an issue. It looks like it was introduced in the original PR that added md-no-select-click. But that PR appears to have been fixing an issue with md-tabs related to ui-router (https://github.com/angular/material/issues/5351).

It's very unfortunate that the original PR did not include any tests for this feature. It appears that there are still no tests for it today. The documentation is also pretty brief and doesn't mention ui-router at all.

To investigate this properly, we need a demo that involves ui-router.

@epelc since you authored the original md-no-select-click PR, can you please provide some feedback on this issue?

[epelc]

@Splaktar The original idea was that ui-router's directive listened for a click event and this would prevent the initial selection from passing a click event. So if you had a set of tabs which were used for navigation and each tab tied to a route, you could add this attribute to fix loading a route besides the first tab sending you back to the first tab because of the initial selection firing the click event and triggering a navigation.

I hope this explains it. I can clarify if needed. PS we aren't using this anymore as we are completing our angular upgrade this month and will be done with this project. For the time being we are locked on a slightly older version. I would imagine others need or are using this though as it's probably common to use a tab bar for route navigation and ui-router is extremely popular with angular.js.

[Splaktar]

@epelc OK, thank you very much for that information.

We're recommending that all page level route navigation be done with md-navbar instead of md-tabs today.

Based on looking over the code, it looks like the md-on-select-click only applies to one case where a tab can generate a click event and that is when an md-tab becomes active and the watch here calls select(tabIndex, true).

It looks like this is still working as intended today, but we need to update the documentation to be a lot more clear about what this attribute does because "When enabled, click events will not be fired when selecting tabs." is not really accurate. I'll try to come up with a better description.

[epelc]

Sounds good. Let me know if you need more info. Md-navbar wasn’t around
when I added this so maybe even mention this in docs that md-navbar should
probably be used instead.

On Sat, May 19, 2018 at 17:50 Michael Prentice [e-mail]
wrote:

@epelc https://github.com/epelc OK, thank you very much for that
information.

We're recommending that all page level route navigation be done with
md-navbar instead of md-tabs today.

Based on looking over the code, it looks like the md-on-select-click only
applies to one case where a tab can generate a click event and that is
when an md-tab becomes active and the watch here
https://github.com/epelc/material/blob/master/src/components/tabs/js/tabDirective.js#L106
calls select(tabIndex, true).

It looks like this is still working as intended today, but we need to
update the documentation to be a lot more clear about what this attribute
does because "When enabled, click events will not be fired when selecting
tabs." is not really accurate. I'll try to come up with a better
description.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/material/issues/10947#issuecomment-390434996,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE9qosOuHmQOiGJ3wc_FlMcIgqcg0Vldks5t0JOrgaJpZM4QAhj5
.

>

Best regards,
Edward J. Pelc
President

Great Cloak Inc.

Website: FreightChick.com https://freightchick.com
Office: [phone]
Cell: [phone]

[Splaktar]

Yep, we've got that note in the md-tabs docs now.

Here is my new proposed description for md-no-select-click:

When true, click events will not be fired when the value of md-active on an md-tab changes. This is useful when using tabs with UI-Router's child states, as triggering a click event in that case can cause an extra tab change to occur.

[epelc]

Lgtm

On Sat, May 19, 2018 at 17:55 Michael Prentice [e-mail]
wrote:

Yep, we've got that note in the md-tabs docs now.

Here is my new proposed description for md-no-select-click:

When true, click events will not be fired when the value of md-active on
an md-tab changes. This is useful when using tabs with UI-Router's child
states, as triggering a click event in that case can cause an extra tab
change to occur.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/material/issues/10947#issuecomment-390435270,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE9qorJOxnZr7bZi8TvUdRu99XNQd0wzks5t0JTpgaJpZM4QAhj5
.

>

Best regards,
Edward J. Pelc
President

Great Cloak Inc.

Website: FreightChick.com https://freightchick.com
Office: [phone]
Cell: [phone]