ruby-on-railssimple-form

Simple_form buttons disabled

I'm new to Rails, so sorry if this is a simple question: (using Rails 7)

I have a simple_form as bellow:

<%= simple_form_for investment, url: investment_path(investment), method: :patch do |f| %>
  <tr>
    <td style="width: 5%;"><%= f.input :user_id, 
                                        collection: User.all.map { |u| [u.initials, u.id] }, 
                                        label: false, 
                                        input_html: { class: 'form-control', style: 'font-size: 12px;' } %></td>
    <td style="width: 15%;"><%= f.input :institution_id, 
                                        collection: Institution.all.to_a, 
                                        label: false, 
                                        input_html: { class: 'form-control', style: 'font-size: 12px;' } %></td>
    <td style="width: 15%;"><%= f.input :investment_type_id, 
                                        collection: InvestmentType.all.to_a, 
                                        label: false, 
                                        input_html: { class: 'form-control', style: 'font-size: 12px;' } %></td>
    <td style="width: 15%;"><%= f.input :fin_benchmark_id, 
                                        collection: FinBenchmark.all.to_a, 
                                        label: false, 
                                        input_html: { class: 'form-control', style: 'font-size: 12px;'  } %></td>
    <td style="width: 30%;"><%= f.input :name, 
                                        as: :text, 
                                        label: false, 
                                        input_html: { class: 'form-control', style: 'outline: none, font-size: 12px', rows: '1' } %></td>
    <td style="width: 15%;"><%= f.input :investment_number, 
                                        label: false, 
                                        input_html: { class: 'form-control', style: 'font-size: 12px' } %></td>
    <td style="width: 15%;"><%= f.input :risk, 
                                        label: false, 
                                        input_html: { class: 'form-control', style: 'font-size: 12px' } %></td>
    <td><%= f.input :track_return, label: false %></td>
    <td><%= link_to 'Show', investment %></td>
    <td><%= f.submit 'Update', class: 'btn btn-primary' %></td>
  </tr>
<% end %>

When I click the Update button, changes made in the form are submitted and the DB is changed. This also redirects me to an 'Show' page (as in many Rails examples). The 'Show' page has a link back to the index that loads this form.

When comming back to the form, none of the buttons work any more, they are all disabled. I've google for this and found that I should add data: { disable_with: false }. I did it, but still, buttons are still disabled. The only way to get the buttons working again is to refresh the page.

How can we make the buttons work when moving back to this page?

Solution

  • Rails is trying hard not to reload your pages. It's using it's newest toy, Turbo, to hijack all links and submissions from the normal HTML operations and instead use caches and remote form submission and browser history and a bunch of other tricks to avoid expensive page reloads.

    So the form page you're coming back to is still in the "state" you left it. Meaning, the form has been submitted and the buttons have been disabled so you can't accidentally submit it twice.

    A few things you can do to tell Rails that you actually need a refresh:

    1. turn off Turbo for the form:
    <%= simple_form_for investment, url: investment_path(investment), method: :patch, data: { turbo: false } do |f| %>

    This should force the show page to be a full redirect and page load. and should fix the issue coming back to the index view.

    1. Turn off Turbo on the link from show to index, which should also force a full page load:
    <%= link_to investments_path, data: { turbo: false } %>

    1. Get really fancy with a custom rendering on the index page to force only the form to reload.

    2. Use a turbo frame on the form and when coming from the show view back to the index view, use a turbo stream to pipe in a new form to replace the already submitted form.

    I'm sure DHH wants you to do #4 and turning off Turbo does have a penalty: you're actually reloading your page, which is slow and costly.