Why is the first element always blank in my Rails multi-select, using an embedded array?

HtmlRuby on-RailsFormsSerializationMulti Select

Html Problem Overview


I'm using Rails 3.2.0.rc2. I've got a Model, in which I have a static Array which I'm offering up through a form such that users may select a subset of Array and save their selection to the database, stored in a single column in Model. I've used serialize on the database column which stores the Array and Rails is correctly converting the users' selections into Yaml (and back to an array when reading that column). I'm using a multi-select form input to make selections.

My problem is that, the way I currently have it, everything works as I would expect except that the user's subset array always has a blank first element when it's sent to the server.

This isn't a big deal, and I could write code to cut that out after the fact, but I feel like I'm just making some kind of syntactical error as it doesn't seem to me that the default Rails behaviour would intentionally add this blank element without some reason. I must have missed something or forgot to disable some kind of setting. Please help me understand what I'm missing (or point me in to some good documentation that describes this with more depth than what I've been able to find on the intertubes).

MySQL Database Table 'models':
  • includes a column named subset_array which is a TEXT field
Class Model includes the following settings:
  • serialize :subset_array
  • ALL_POSSIBLE_VALUES = [value1, value2, value3, ...]
Form for editing Models includes the following input option:
  • f.select :subset_array, Model::ALL_POSSIBLE_VALUES, {}, :multiple => true, :selected => @model.subset_array
PUT to server from client looks something like this:
  • assuming only value1 and value3 are selected
  • "model" => { "subset_array" => ["", value1, value3] }
Database update looks like this:
  • UPDATE 'models' SET 'subset_array' = '--- \n- \"\"\n- value1\n- value3\n'

As you can see, there's this extra, blank, element in the array being sent and set in the database. How do I get rid of that? Is there a parameter I'm missing from my f.select call?

Much thanks appreciated :)

EDIT: This is the generated HTML code from the f.select statement. It looks as though there is a hidden input being generated which may be the cause of my issue? Why is that there?

<input name="model[subset_array][]" type="hidden" value>
<select id="model_subset_array" multiple="multiple" name="model[subset_array][]" selected="selected">
    <option value="value1" selected="selected">Value1</option>
    <option value="value2">Value2</option>
    <option value="value3" selected="selected">Value3</option>
    <option...>...</option>
</select>

Html Solutions


Solution 1 - Html

In Rails 4:

You will be able to pass :include_hidden option. https://github.com/rails/rails/pull/5414/files

As a quick fix for now: you can use right now in your model:

before_validation do |model|
  model.subset_array.reject!(&:blank?) if model.subset_array
end

This will just delete all blank values at model level.

Solution 2 - Html

The hidden field is what is causing the issue. But it is there for a good reason: when all values are deselected, you still receive a subset_array parameter. From the Rails docs (you may have to scroll to the right to see all of this):

  # The HTML specification says when +multiple+ parameter passed to select and all options got deselected
  # web browsers do not send any value to server. Unfortunately this introduces a gotcha:
  # if an +User+ model has many +roles+ and have +role_ids+ accessor, and in the form that edits roles of the user
  # the user deselects all roles from +role_ids+ multiple select box, no +role_ids+ parameter is sent. So,
  # any mass-assignment idiom like
  #
  #   @user.update_attributes(params[:user])
  #
  # wouldn't update roles.
  #
  # To prevent this the helper generates an auxiliary hidden field before
  # every multiple select. The hidden field has the same name as multiple select and blank value.
  #
  # This way, the client either sends only the hidden field (representing
  # the deselected multiple select box), or both fields. Since the HTML specification
  # says key/value pairs have to be sent in the same order they appear in the
  # form, and parameters extraction gets the last occurrence of any repeated
  # key in the query string, that works for ordinary forms.

EDIT: The last paragraph suggests that you shouldn't be seeing the empty one in the case when something is selected, but I think it is wrong. The person who made this commit to Rails (see https://github.com/rails/rails/commit/faba406fa15251cdc9588364d23c687a14ed6885) is trying to do the same trick that Rails uses for checkboxes (as mentioned here: https://github.com/rails/rails/pull/1552), but I don't think it can work for a multiple select box because the parameters sent over form an array in this case and so no value is ignored.

So my feeling is that this is a bug.

Solution 3 - Html

In Rails 4+ set :include_hidden on select_tag to false

<%= form.grouped_collection_select :employee_id, Company.all, :employees, :name, :id, :name, { include_hidden: false }, { size: 6, multiple: true } %>

Solution 4 - Html

Another quick fix is to use this controller filter:

def clean_select_multiple_params hash = params
  hash.each do |k, v|
    case v
    when Array then v.reject!(&:blank?)
    when Hash then clean_select_multiple_params(v)
    end
  end
end

This way can be reused across controllers without touching the model layer.

Solution 5 - Html

http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-check_box > Gotcha > > The HTML specification says unchecked check boxes or selects are not successful, > and thus web browsers do not send them. Unfortunately this introduces > a gotcha: if an Invoice model has a paid flag, and in the form that > edits a paid invoice the user unchecks its check box, no paid > parameter is sent. So, any mass-assignment idiom like > > @invoice.update(params[:invoice]) wouldn't update the flag. > > To prevent this the helper generates an auxiliary hidden field before > the very check box. The hidden field has the same name and its > attributes mimic an unchecked check box. > > This way, the client either sends only the hidden field (representing > the check box is unchecked), or both fields. Since the HTML > specification says key/value pairs have to be sent in the same order > they appear in the form, and parameters extraction gets the last > occurrence of any repeated key in the query string, that works for > ordinary forms.

To remove blank values:

  def myfield=(value)
    value.reject!(&:blank?)
    write_attribute(:myfield, value)
  end

Solution 6 - Html

In the controller:

arr = arr.delete_if { |x| x.empty? }

Solution 7 - Html

I fixed it using the params[:review][:staff_ids].delete("") in the controller before the update.

In my view:

= form_for @review do |f|
  = f.collection_select :staff_ids, @business.staff, :id, :full_name, {}, {multiple:true}
= f.submit 'Submit Review'

In my controller:

class ReviewsController < ApplicationController
  def create
  ....
    params[:review][:staff_ids].delete("")
    @review.update_attribute(:staff_ids, params[:review][:staff_ids].join(","))
  ....
  end
end

Solution 8 - Html

I make it work by writing this in the Javascript part of the page:

$("#model_subset_array").val( <%= @model.subset_array %> );

Mine looks more like following:

$("#modela_modelb_ids").val( <%= @modela.modelb_ids %> );

Not sure if this is going to get me headache in the future but now it works fine.

Solution 9 - Html

Use jQuery:

$('select option:empty').remove(); 

Option to remove blank options from drop down.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionrobmclartyView Question on Stackoverflow
Solution 1 - HtmlBogdan GusievView Answer on Stackoverflow
Solution 2 - HtmlMike A.View Answer on Stackoverflow
Solution 3 - HtmlMartinView Answer on Stackoverflow
Solution 4 - HtmlMaxView Answer on Stackoverflow
Solution 5 - HtmldevishotView Answer on Stackoverflow
Solution 6 - HtmlMauroView Answer on Stackoverflow
Solution 7 - HtmlBrunoView Answer on Stackoverflow
Solution 8 - HtmlimaginabitView Answer on Stackoverflow
Solution 9 - Htmluser1875926View Answer on Stackoverflow