argerim/select2-rails

Not getting placeholder

Closed this issue · 7 comments

Previously the select2 was getting the placeholder from the placeholder tag in the select, but now it doesn't work.

It is a basic markup, but then my select appears empty:

main.js

$('select.select2').select2();

_form.html.erb

<%= simple_form_for model do |f| %>
  <%= f.input :name, placeholder: 'Who are you?' %>
  <%= f.input :category_id, input_html: { class: 'select2' }, collection: @categories, placeholder: 'Please select the category you want' %>
  <%= f.submit  %>
<% end %>

My fix for now is:

$('select.nice').select2({
  placeholder: '- Select -'
});

Try using the data-placeholder attribute instead.

"data-placeholder" => "…"

or

data: {placeholder: "…"}

Yep! It works with data-placeholder, so in my code i added data: { placeholder: '...' } this way:

<%= simple_form_for model do |f| %>
  <%= f.input :name, placeholder: 'Who are you?' %>
  <%= f.input :category_id, input_html: { class: 'select2', data: { placeholder: 'Please select the category you want' } }, collection: @categories %>
  <%= f.submit  %>
<% end %>

Thanks for your help @nilbus, hope there is a fix soon...

Using the input tag's HTML5 placeholder attribute was never a documented feature of select2, though at least with <input> tags, it worked with version 3.5. In 4.0 now that only <select> tags are preferred (which don't support a placeholder attribute in HTML5), I doubt they will add support for that. Use the data-placeholder attribute as the documentation suggests.

This issue can be closed, as this rails plugin can not add features to the select2 library.

In 4.0 now that only <select> tags are preferred (which don't support a placeholder attribute in HTML5)

This is correct, and Select2 works against the JS DOM (instead of HTML attributes) so it doesn't have access to the (incorrectly placed) placeholder attribute even if it is present.

I doubt they will add support for that. Use the data-placeholder attribute as the documentation suggests.

Using data-placeholder is the recommended solution here. Or do it within the JS if you have direct access there and don't want to place it within the HTML.

simi commented

Next time please open select2 issues in upstream repository. This repo is just wrapper for Rails asset pipeline and only wrapper problems should be reported here.