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

material/src/components/tabs/js/tabsController.js

Line 340 in 3b59b20

if (canSkipClick && ctrl.noSelectClick) return;

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 (#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 ***@***.***> 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 <#10947 (comment)>, 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: (941) 702-4366 Cell: (941) 735-4047