Refactor autocompleter wrap for dropdown, append

app/helpers/autocompleter_helper.rb

@@ -21,32 +21,35 @@ def autocompleter_field(**args)
       data: { autocompleter_target: "input" }
     }.deep_merge(args.except(*autocompleter_outer_args))
     ac_args[:class] = class_names("dropdown", args[:class])
-    ac_args[:wrap_data] = autocompleter_wrap_data(args)
+    # doing our own wrap here, because dropdown is position-absolute
+    ac_args[:wrap_data] = { autocompleter_target: "wrap"}
     ac_args[:label_after] = autocompleter_label_after(args)
     ac_args[:label_end] = autocompleter_label_end(args)
-    ac_args[:append] = autocompleter_append(args)
+    ac_args[:append] = autocompleter_dropdown
 
-    if args[:textarea] == true
-      text_area_with_label(**ac_args)
-    else
-      text_field_with_label(**ac_args)
+    tag.div(data: autocompleter_wrap_data(args)) do
+      if args[:textarea] == true
+        concat(text_area_with_label(**ac_args))
+      else
+        concat(text_field_with_label(**ac_args))
+      end
+      concat(args[:append])
     end
   end
 
   # Any arg not on this list gets sent to the text field/area.
   def autocompleter_outer_args
     [:wrap_data, :type, :separator, :textarea, :hidden_value, :hidden_data,
      :create_text, :keep_text, :edit_text, :find_text, :create, :create_path,
-     :map_outlet, :geocode_outlet]
+     :map_outlet, :geocode_outlet].freeze
   end
 
   def autocompleter_wrap_data(args)
     {
       controller: :autocompleter, type: args[:type],
       separator: args[:separator],
       autocompleter_map_outlet: args[:map_outlet],
-      autocompleter_geocode_outlet: args[:geocode_outlet],
-      autocompleter_target: "wrap"
+      autocompleter_geocode_outlet: args[:geocode_outlet]
     }.deep_merge(args[:wrap_data] || {})
   end
 
@@ -68,13 +71,6 @@ def autocompleter_label_end(args)
     end
   end
 
-  def autocompleter_append(args)
-    capture do
-      concat(autocompleter_dropdown)
-      concat(args[:append])
-    end
-  end
-
   def autocompleter_has_id_indicator
     link_icon(:check, title: :autocompleter_has_id.l,
                       class: "ml-3 px-2 text-success has-id-indicator",

app/javascript/controllers/autocompleter_controller.js

@@ -149,7 +149,7 @@ export default class extends Controller {
   // The select target is not the <input> element, but a <select> that can
   // swap out the autocompleter type. The <input> element is its target.
   static targets = ["input", "select", "pulldown", "list", "hidden", "wrap",
-    "createBtn", "hasIdIndicator", "keepBtn", "mapWrap"]
+    "createBtn", "hasIdIndicator", "keepBtn", "mapWrap", "collapseFields"]
   static outlets = ["map"]
 
   initialize() {
@@ -174,7 +174,7 @@ export default class extends Controller {
   }
 
   connect() {
-    this.element.dataset.stimulus = "connected";
+    this.element.dataset.stimulus = "autocompleter-connected";
 
     // Figure out a few browser-dependent dimensions.
     this.getScrollBarWidth;
@@ -1008,12 +1008,14 @@ export default class extends Controller {
     if (hidden_id && hidden_id !== NaN && hidden_id != 0) {
       this.wrapTarget.classList.add('has-id');
       this.wrapTarget.classList.remove('offer-create');
+      this.cssUncollapseFields()
     } else {
       this.wrapTarget.classList.remove('has-id');
       if (this.inputTarget.value &&
         !this.wrapTarget.classList.contains('create')) {
         this.wrapTarget.classList.add('offer-create');
       }
+      this.cssCollapseFields()
     }
     // On forms where a map may not be relevant, we also show/hide the map.
     // Only show if we're in "create" mode.
@@ -1026,6 +1028,18 @@ export default class extends Controller {
     }
   }
 
+  cssCollapseFields() {
+    if (!this.hasCollapseFieldsTarget) return;
+
+    this.collapseFieldsTarget.classList.add('d-none');
+  }
+
+  cssUncollapseFields() {
+    if (!this.hasCollapseFieldsTarget) return;
+
+    this.collapseFieldsTarget.classList.remove('d-none');
+  }
+
   storeCurrentHiddenData() {
     this.verbose("autocompleter:storeCurrentHiddenData()");
     this.stored_id = parseInt(this.hiddenTarget.value); // value is a string

app/views/controllers/observations/namings/_fields.erb

@@ -20,25 +20,18 @@ menu = unless @vote&.value&.nonzero?
        end
 confidences = options_for_select(menu, @vote&.value)
 select_opts = { include_blank: create }
-feedback = if @given_name.present?
-             tag.div do
-               render(partial: "shared/form_name_feedback",
-                      locals: feedback_locals)
-             end
-           else
-             ""
-           end
 %>
 
-<%=
-[
-  feedback,
-  fields_for(:naming) do |f_n|
+<% if @given_name.present? %>
+  <%= tag.div do
+        render(partial: "shared/form_name_feedback", locals: feedback_locals)
+      end %>
+<% end %>
+
+<%= fields_for(:naming) do |f_n| %>
+  <% vote_reasons = tag.div(data: { autocompleter_target: "collapseFields" },
+                            class: "d-none") do
     [
-      autocompleter_field(
-        form: f_n, field: :name, type: :name, label: "#{:WHAT.t}:",
-        value: @given_name, autofocus: focus_on_name, help: name_help
-      ),
       f_n.fields_for(:vote) do |f_v|
         select_with_label(form: f_v, field: :value,
                           options: confidences, select_opts: select_opts,
@@ -49,7 +42,12 @@ feedback = if @given_name.present?
         naming_form_reasons_fields(f_r, @reasons)
       end
     ].safe_join
-  end,
-  hidden_field_tag(:context, context)
-].compact.safe_join
-%>
+  end %>
+  <%= autocompleter_field(
+    form: f_n, field: :name, type: :name, label: "#{:WHAT.t}:",
+    value: @given_name, autofocus: focus_on_name, help: name_help,
+    append: vote_reasons
+  ) %>
+<% end %>
+
+<%= hidden_field_tag(:context, context) %>