Change link_to_remove_association to a button

[sakamies]

Hi! I'd very much like to have a button in place of a link for the remove association action. The link-as-button doesn't link anywhere and it does an action. It should probably be a button by default, or at least possible to make into a button.

I did find a stack overflow question about it, but nesting a button inside a link is pretty wonky.

Is this possible, or could you make it possible? Thanks!

[nathanvda]

So the question is how to style the link as a button (I added an answer to the SO question you linked to), right? You can just style the link using the button-classes, as follows:

    = link_to_remove_association 'X', f, class: 'btn btn-default btn-lg'

Or do you need another reason why the link has to be a html button?

[sakamies]

My issue is with the behaviour and accessibility. It can be styled in any way, that's easy, but users expect a button to behave like a button and not like a link. (You can open a link in a new tab, it has a context menu and keyboard interactions are different between butrons and links) So the element should be a <button type="button">.

[sakamies]

Here's a pretty great in depth article about the issue. https://marcysutton.com/links-vs-buttons-in-modern-web-applications/

[nathanvda]

Ok, the SO question confused me ;) I understand the purist approach to the HTML. I guess I am showing my age in preferring links because they used to be much easier to style.

At the moment it is not possible to generate a button, I/we/someone should add the button_to_{add|remove}_association which should not be too hard at all. I cannot promise anything soon, as lately I have not had a lot of free time/incentive/motivation to really work on cocoon.

[sakamies]

I do remember the times, but yeah, I was always a purist. :) I'll see if my project mates and me could dig through the code enough to make a pull request.

[sakamies]

I actually have a real use case now. We're doing a billing form that needs to be disabled before the user has done some authentication stuff. So the form is inside a fieldset that has a disabled attribute. That automatically makes all form elements inside disabled (including buttons), but links work as usual, so the add/remove row links still work, but they should be disabled.

[nathanvda]

Haha yes, good use case indeed. Maybe a bit contrived and imho also easy to work-around (which are probably already doing).

Anyway, you got me inspired to look a little further. I imagined I would be easy to just replace link_to with button_to and we would be done, but that is not the case. You cannot use button_to inside a form (as it will create a button wrapped in a form to POST by default).

But just using button_tag with type: 'button' should do the trick. Mmmmmm ok.
Let me see if I can find some time.

[p12y]

I've created a pull request for this. Changed the text links to buttons and updated the specs.
Not sure what's going on with the specs. They all pass on my machine but there are loads of build errors on Travis.

[eric-norcross]

The annoying thing about the <button> element (and others) is often times browsers incorporate their own styling that can't be overridden; this is particularly evident when using newer features such as flexbox (see: https://bugzilla.mozilla.org/show_bug.cgi?id=984869). At the least, I would urge keeping the link_to functionality for those who need/want a simple a tag and adding the option to generate a button element if preferred.

[Ruff9]

Any update on this ?