Rails and data-disable-with not working with Safari

Question

<%= f.button :button, 'Move', class: "btn btn-warning", data: { disable_with: "<i class='fa fa-spinner fa-spin'></i> Moving…"} %>

This works fine in Chrome but fails in Safari. This works on links but not on buttons or submits. There seems to be a few posts on this but no definitive answer. My webpage console is not throwing any JS errors etc.

The button is actually disabled (you can see the 'do not enter' icon hover for a moment after you click the button) but the text does not change.

I can probably live with this but it would be nice to resolve it.

Answer 1

This is caused by the normal behavior of Safari which stops updating the DOM after a form is submitted, that is why no error is shown in the console!

(there is an example here to prove this)

The only way I found that can fix this is to delay the form submission by a js script there is one written as a workaround for this issue here

Related thread: https://github.com/rails/jquery-ujs/issues/306#issuecomment-167118087