使用 chrome 自动完成功能时，ruby on rails 应用程序出现故障

Question

I have a weird bug that hangs up or makes my app unusable or freezes for a minute.

So I have a 2 forms side by side one for billing and one for shipping and it has a drop down that uses the select2 library. When a user selects this drop down the chrome autocomplete shows up to. Its overlapping the select2 dropdown. here's an image

so the problem here is when the user uses that drop down to select a country and uses the chrome autofill instead of the select2 drop down and hits the enter key the form on the right fills the country and hangs up or freezes the app. also when they choose a country or a state it will do a get request to the server.

What I tried are:

1) turn off the chrome autocomplete on the settings. it works no issues. the form on the right won't be updated (so I concluded it was chrome)

2) I added an html: {autocomplete: 'off'} but this doesn't work I don't know why.

here's the form:

<%= form_for [:admin, @corporate_account], html: { autocomplete: "off" } do |f| %>
    <fieldset data-hook="new_property">

      <div class="row">
        <div class="col-md-12">
          <%= render partial: 'form', locals: { f: f } %>
        </div>
      </div>
      </div>
        <div class="col-md-12">
          <%= render partial: 'address_form', locals: { f: f } %>
        </div>
      </div>

      <div class="form-actions">
        <%= render partial: 'spree/admin/shared/new_resource_links' %>
      </div>
    </fieldset>
<% end %>

UPDATE

I found that when I hit the enter with the chrome autocomplete it sends a GET request. but with the regular drop down from the app it doesn't, I think chromes autocomplete after hitting the enter key it sends the form. hhmmmmmmmmm

Answer 1

We are using select2 for our searches. It uses jQuery and ids are dynamically added. I found the script attaches the ID dynamically. It wasn't in the .js file, it was inside the .erb file. I've added this .js script inside the .erb file.

<% content_for :head do %>
  <%= javascript_tag do %>
    $(document).ready(function(){
      $('span#<%= s_or_b %>country .select2').on('change', function() { update_state('<%= s_or_b %>'); });

      <%# bellow this comment the code that I added %>
      <%# this IDs are gnerated dynamically by select2 %>
      const countryID = $('span#<%= s_or_b %>country .select2 .select2-search input').attr('id')
      const stateID = $('span#<%= s_or_b %>state .select2 .select2-search input').attr('id')

      <%# add the type attribute search so autocomplete can be toggled on and off %>
      $(`#${countryID},#${stateID}`).attr('type', 'search')

      <%# on focus set the autocomplete attribute off %>
      $(`#${countryID},#${stateID}`).on('focus', function(){ 
        $(`#${countryID},#${stateID}`).attr('autocomplete', 'off')
       }) 

    });
  <% end %>
<% end %>

So when I focus on the search input, Chrome's autocomplete is not working any more.