When displaying an edit form, what's the best way to supply a prefilled value for an async combobox?

[moneill]

I have an async combobox that queries an address autocomplete API. I've read through the docs and scanned through #123 as well, but I can't seem to accomplish what I'm after.

Here's my combobox code:

<%= combobox_tag :search, autocomplete_path(category: "region"), value: trip.formatted_address, spellcheck: false, placeholder: "Begin typing a location name", data: { action: "hw-combobox:selection->autocomplete#startSelected", autocomplete_target: "startSearch" } %>

In the DOM, I can see that the hidden input's value is correctly set to the value of trip.formatted_address, but the combobox itself still renders the placeholder string. I would ideally like the combobox to be prefilled with the value of trip.formatted_address, which is Chicago, IL, USA in this example. Anyone have pointers on how I might accomplish that? I can sorta hack it for now by doing placeholder: trip.formatted_address || "Begin typing a location name" but that's not ideal.

[josefarias]

Hey @moneill thanks for the question

I believe if you use the form builder syntax this should just work without passing a :value. Let me know if not!

The reasoning behind this is — In your case, the value and display are the same thing. But this doesn't always happen. So we can't assume the passed value can be used as a display every time (although it might be a sensible default, a discussion for another day!).

By having an object to call #search on, we can be sure whatever that returns is the appropriate display. Be it a string, like in your case, or an object, which would have to implement #to_combobox_display for the combobox to know what to show as a display.

Please try this and let me know if it works:

First, update to the latest v0.2.3 (earlier versions don't support non-AR objects in the form builder).

Then, create a form object that responds to #search:

class AddressSearch
  include ActiveModel::Model

  attr_accessor :trip

  def search
    trip.formatted_address
  end
end

>> AddressSearch.new(trip: OpenStruct.new(formatted_address: "Chicago, IL, USA")).search
=> "Chicago, IL, USA"

Instantiate it in your controller:

class TripsController < ApplicationController
  def new
    @address_search = AddressSearch.new(trip: OpenStruct.new(formatted_address: "Chicago, IL, USA")).search
  end
end

Finally, use the form builder syntax to build your combobox:

<%= form_with model: @address_search, url: "#" do |form| %>
  <%= form.combobox :search, autocomplete_path(category: "region"), spellcheck: false, placeholder: "Begin typing a location name", data: { action: "hw-combobox:selection->autocomplete#startSelected", autocomplete_target: "startSearch" } %>
<% end %>

This is admittedly cumbersome. Maybe we should allow passing an object to combobox_tag instead of inferring it from the form. But this'd be the way to do it for the time being (recall we're in an alpha stage 😅).

One last thing is that this dance isn't necessary in synchronous comboboxes because all the options are loaded, so we can look for the option in-memory and get its display value from there.

[josefarias]

It seems like this field is part of a larger form though, so instead of modeling AddressSearch you might want to create a form object for the form as a whole. Sorry this isn't more straightforward yet.

[michelson]

Hi @josefarias, I've encountered the same issue; I have a field_id which is not an association. It displays the int id, but I expect to get the object's name. Usually in forms we do f.select:field_id, [..name, ...id] and it will display the right option.

any hints?

[michelson]

I've solved by using a association_method, and creating the method in the resource class