If it doesn't change with the disable_with option in Safari

When creating a form with Rails, you can prevent double submission by adding the disable_with option to the submit button.

= f.button 'Send', data: { disable_with: 'sending…' }

However, only in Safari, the wording of the button did not change for some reason. There are many reports on GitHub. disable_with doesn't work with link in Safari #306

solution

To write from the conclusion, I was able to avoid the mess by deliberately delaying the transmission process with JS. In the Issue, an example written in vanilla JS will appear, so if you are not using jQuery, it may be faster to refer to that.

= f.button 'Send', data: { disable_with: 'sending…' }, class: 'disable_with_safari'

$('.disable-with-safari').click(function (event) {
  if ($(this).data('disableWith')) {
    $(this).prop('disabled', true);
    $(this).text($(this).data('disableWith'));
    var form = $(this).closest('form');
    if (form.length) {
      event.preventDefault();
      setTimeout(() => form.submit(), 300);
    }
  }
});

Remarks

As discussed in the opening issue, Safari's unique specification seems to prevent the DOM from being updated once a submit has been run. (Since it is a comment on Issue, please refer to the primary information for the exact specifications.) Therefore, even if disable_with was added, the wording of the button did not change.

By the way, when I searched for this problem, the following solution came out, but in my case it didn't work.

--cursor: pointer; --Set an empty click event --Set an empty touchstart event --Change the binding to $ (document)