Disappearing selects in form - liveview

Phoenix Forum Questions / Help
, ,
1

I’ve got a strange problem occurring in my LiveView render. Here is what happens as a flow:

  1. I choose any not default option from first select, leaving second select default -> I submit my search form to LiveView -> On the reloaded screen with new entries I choose again default option for first select, leaving second select default -> I submit my search form to LiveView -> Second select disappears
  2. I choose any not default option from second select, leaving first select default -> I submit my search form to LiveView -> On the reloaded screen with new entries I choose again default option for second select, leaving first select default -> I submit my search form to LiveView -> First select disappears
  3. I choose any not default options from both selects -> I submit my search form to LiveView -> I clear fields submitting clear event to LiveView -> I submit my search form with default values of first and second select to LiveView -> Both selects disappear

By saying disappear I really mean disappear - in elements inside chrome developer tools a place, where selector should be, is just empty.

I believe that the problem is caused somewhere in assigning values to the fields, here is my code for generating selects:

<div class="form-group col-md-3 main-search__form-group">
  <%= label f, :rent_type, gettext("Type"), class: "main-search__form-label" %>
    <%= select f, :rent_type, [[key: "", value: ""]] ++ @rent_types,
      class: "form-control main-search__form-input main-search__form-input--select",
      value: @form_vals.rent_type %>
    <%= error_tag_live f, :rent_type, @changeset %>
  </div>

  <div class="form-group col-md-3 main-search__form-group">
    <%= label f, :rooms_number_min, gettext("Rooms") %>
    <%= select f, :rooms_number_min, 
      [
        [key: "1+", value: "1"],
        [key: "2+", value: "2"],
        [key: "3+", value: "3"],
        [key: "4+", value: "4"],
        [key: "5+", value: "5"]
      ], value: @form_vals.rooms_number_min,
      class: "form-control main-search__form-input main-search__form-input--select" %>
    <%= error_tag_live f, :rooms_number_min, @changeset %>
  </div>
</div>

@form_vals are values from previous request, which are loaded for form to keep its state. I’m sure that they are passed, but I’m not sure if they have good format. Format of params entering LiveView:

%{
  ... some other params ...
  "rent_max" => "",
  "rent_min" => "",
  "rent_type" => "2",
  "rooms_number_min" => "1",
  "square_area_max" => "",
  "square_area_min" => ""
  ... some other params ...
}

Format of params leaving LiveView as form_vals:

%{
  ... some other params ...
  rent_max: "",
  rent_min: "",
  rent_type: "2",
  rooms_number_min: "1",
  square_area_max: "",
  square_area_min: ""
  ... some other params ...
}

When sending clear event to LiveView I just respond with clear fields values:

%{
  ... many other fields ...
  rent_type: "",
  rooms_number_min: "1",
  ... many other fields ...
}

If anyone has an idea why my selectors are disappearing I would be really grateful to let me know. I’m really stuck and dunno what should I do.

2

I had a problem with disappearing inputs when using the same form multiple times on a page.

I fixed it by forcing a unique id on the form (making sure the form elements get a unique id attribute as well).

  <%= f = form_for @changeset, "#", [] %>
    <% f = Map.put(f, :id, @unique_form_id) %>

Not sure if that’s the same problem you are having.

1 Like
3

I just found a workaround. I precede any select with a hidden input, which has same name. My code works, no idea why :expressionless:. Example beneath:

                <%= hidden_input f, :rent_type %>
                <%= hidden_input f, :rooms_number_min %>

                <div class="form-group col-md-3 main-search__form-group">
                  <%= label f, :rent_type, gettext("Type"), class: "main-search__form-label" %>
                  <%= select f, :rent_type, [[key: gettext("choose"), value: ""]] ++ @rent_types,
                      class: "form-control main-search__form-input main-search__form-input--select" %>
                  <%= error_tag f, :rent_type %>
                </div>

                <div class="form-group col-md-3 main-search__form-group">
                  <%= label f, :rooms_number_min, gettext("Rooms") %>
                  <%= select f, :rooms_number_min, 
                    [
                      [key: "1+", value: "1"],
                      [key: "2+", value: "2"],
                      [key: "3+", value: "3"],
                      [key: "4+", value: "4"],
                      [key: "5+", value: "5"]
                    ], class: "form-control main-search__form-input main-search__form-input--select" %>
                  <%= error_tag f, :rooms_number_min %>
                </div>