jquery select2 tags bugs in safari

问题

Everything works fine on desktop resized to mobile dimensions. It is a Ruby on Rails app.

Bug #1

I don't know how to describe this but when I am entering letters into the input (that select2 is called on) on my iphone in Safari, it shakes/jolts/moves up and down after each letter is entered.

Bug 2

After tags have been entered and you press "done" on the Iphone keyboard, the select2-dropdown will sometimes remain open. It is very finicky.

Script:

$(document).on('page:change', function () {
  $('.tags').select2({
    placeholder: 'Click to select',
    tokenSeparators: [','],
    tags: true,
  });
});

From the view:

<%= f.input :tag_list, input_html: { class: 'tags', multiple: "multiple" }, collection: ActsAsTaggableOn::Tag.all, value_method: :name, label: "Tags" %>

Css

.modal-footer.photoform {
  .select2-container {
     margin: 10px 5px 15px 5px;
     width: 90% !important;
     float: left;
     overflow: hidden;
       li.select2-selection__choice {
         background-color: white;
         color: black;
       }
   }
   input.select2-search__field {
        width: 120px !important;
        margin-bottom: 2px;
        color: black;
   }
  }

回答1:

This is not a perfect solution but it is the best we can do from my searching:

$('select').select2({
  ajax: {
    url: '/example/api',
    delay: 250
  }
});

Select2 options

A request is being triggered on every key stroke, can I delay this? By default, Select2 will trigger a new AJAX request whenever the user changes their search term. You can set a time limit for debouncing requests using the ajax.delay option.

来源：https://stackoverflow.com/questions/39089924/jquery-select2-tags-bugs-in-safari

标签

jquery

jquery-select2