Ember.js: link-to disabled attribute not working?

[mehulkar]

Hey, i'm looking at the API docs for the link-to helper (possibly in the wrong place) and the API defined doesn't seem to be working.

http://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_disabling-the-code-link-to-code-component

When I define {{link-to 'foo' tagName='button' disabled=true}}, it generates a button element with a class disabled applied instead of the disabled attribute being set. Here's an example:

https://ember-twiddle.com/d635d5e6e654c90bae58?openFiles=router.js%2Capplication.template.hbs

[clekstro]

This piqued my interest so I decided to have a look at the source. The interesting thing is that the source hints that _disabled_ doesn't necessarily mean "HTML-disabled":

Accessed as a classname binding to apply the LinkComponent's disabledClass
CSS class to the element when the link is disabled.
When true interactions with the element will not trigger route changes.

I've tried this out locally and am not being taken to /test, meaning the route change is not occurring. So in that sense, this appears to be working, but it's not exactly what one would expect in terms of markup.

[mehulkar]

ah that makes sense. so the disabled attribute is not available when the tagName is button?

[pixelhandler]

@mehulkar I'm curious if you could extend the link-to helper and define the tagName and attributeBindings to use disabled as an attribute.

[rwjblue]

@pixelhandler - yeah, that should almost certainly work

[mehulkar]

that would be a fine workaround. haven't tried to build it yet, but i'm sure it's possible if I need it.

A couple follow ups:

1. Should this disabled attribute on {{link-to}} be called something else if it doesn't relate to the html disabled attribute?
2. If the {{#link-to}} helper is meant to be a replacement for the a html tag (maybe it isn't?), then does it really make sense to have the ability to disable it? If people are override default browser behavior in their apps before ember, then maybe they should be overriding the link-to helper to add the ability to have a _faux_ disabled link, rather than ember providing it as a first class feature?

Just some thoughts. I've already worked around the issue by using <button> tag directly for my specific use case. happy to close this down if this isn't a point of contention!

[pixelhandler]

@mehulkar the answers to your questions above will get more attention if you reach out directly to the community. Have your tried asking in the #needhelp channel of the embercommunity.slack.com chatroom?

[locks]

I am closing this issue since the thread resolved into more of a support role, and there are better avenues for that, like @pixelhandler mentioned above :)
Feel free to re-open the issue if you think it's still justified, thank you.

[Mode7James]

@locks But don't you think it's just a little confusing that what you assume is actually disabling the link only adds a class? It's even more confusing because you can already set the class using the normal way class=computedClassWithDisabledCheck. Since 'disabled' IS an attribute that can be set for most elements, one would assume that it also works for linkTo helpers, right?

Example:
{{link-to 'pages/about.detail' bio class='thumb-btn' disabled=isDisabled}}

creates an anchor

<a href="about/:id" class="thumb-btn ember-view disabled"></a>

The frustrating thing about this is that it doesn't even disable the link. The href is still there and when you hover over it, it still assumes you can navigate there. When you click it though, it doesn't do anything. This to me seems like partial and incomplete functionality.

@pixelhandler Yes, you can always extend and create your own helper, but that's the point of @mehulkar 's ticket - the link-to helper is fundamentally incomplete and requires a hack just to make it work correctly.

[RustyToms]

@Mode7James the anchor tag doesn't have a disabled attribute, it doesn't seem that it can be disabled even if disabled is properly added as an attribute. If the link is set up to open in a new window, when target="_blank", then I don't think there is anything Ember can even do about it. One workaround is to add "pointer-events: none;" to the CSS for a disabled link.

[redbmk]

The "fix" for this for me was a simple Ember.LinkComponent.reopen({ attributeBindings: [ 'disabled' ] }).

It's true anchor tags don't have a disabled attribute, but in my case I don't really care since I'm using tagName="button". If I were to use an anchor tag instead, it still adds the disabled attribute, which does nothing - the browser should just ignore it, but maybe there are other implications for adding unqualified attributes?

Another option might be to create a new 'button-link-to' component or something that defaults to the button tag name and adds the disabled attribute binding...something like:

export default Ember.LinkComponent.extend({
  attributeBindings: ['disabled'],
  tagName: 'button'
});

I guess ideally the default LinkComponent would be smart enough to add the disabled attributeBinding but only for tagNames that support the attribute.

[Charizard]

Anyone coming across this from search, this now seems to work with disabledWhen attribute. Please check the docs for more info.