Feature: add autocomplete to form builder (#408)

app/components/polaris/autocomplete_component.html.erb

@@ -2,7 +2,9 @@
   <%= render(Polaris::PopoverComponent.new(**popover_arguments)) do |popover| %>
     <% popover.with_activator do %>
       <%= text_field %>
-      <% if @name.present? %>
+      <% if @form.present? && @attribute.present? %>
+        <%= @form.hidden_field @attribute, data: {polaris_autocomplete_target: "hiddenInput"} %>
+      <% else %>
         <%= hidden_field_tag @name, nil, data: {polaris_autocomplete_target: "hiddenInput"} %>
       <% end %>
     <% end %>

app/components/polaris/autocomplete_component.rb

@@ -11,7 +11,7 @@ class AutocompleteComponent < Component
       system_arguments[:input_options][:data] ||= {}
       system_arguments[:input_options][:data][:polaris_autocomplete_target] = "input"
 
-      TextFieldComponent.new(**system_arguments)
+      TextFieldComponent.new(form: @form, attribute: @attribute, name: @name, **system_arguments)
     end
     renders_many :sections, ->(**system_arguments) do
       Autocomplete::SectionComponent.new(multiple: @multiple, **system_arguments)
@@ -22,16 +22,20 @@ class AutocompleteComponent < Component
     renders_one :empty_state
 
     def initialize(
+      form: nil,
+      attribute: nil,
+      name: nil,
       multiple: false,
       url: nil,
-      name: nil,
       selected: [],
       popover_arguments: {},
       **system_arguments
     )
+      @form = form
+      @attribute = attribute
+      @name = name
       @multiple = multiple
       @url = url
-      @name = name
       @selected = selected
       @popover_arguments = popover_arguments
       @system_arguments = system_arguments

app/helpers/polaris/form_builder.rb

@@ -117,5 +117,13 @@ def polaris_collection_check_boxes(method, collection, value_method, text_method
         end
       end
     end
+
+    def polaris_autocomplete(method, **options, &block)
+      options[:error] ||= error_for(method)
+      if options[:error_hidden] && options[:error]
+        options[:error] = !!options[:error]
+      end
+      render Polaris::AutocompleteComponent.new(form: self, attribute: method, name: method, **options), &block
+    end
   end
 end

demo/app/models/product.rb

@@ -1,5 +1,5 @@
 class Product
   include ActiveModel::Model
 
-  attr_accessor :title, :status, :country, :selected_markets
+  attr_accessor :title, :status, :country, :selected_markets, :tags
 end

demo/app/previews/form_builder_component_preview.rb

@@ -35,4 +35,9 @@ def dropzone
     upload = Upload.new
     render_with_template(locals: {upload: upload})
   end
+
+  def autocomplete
+    product = Product.new
+    render_with_template(locals: {product: product})
+  end
 end

demo/app/previews/form_builder_component_preview/autocomplete.html.erb

@@ -0,0 +1,15 @@
+<%= form_with(model: product, builder: Polaris::FormBuilder) do |form| %>
+  <%= form.polaris_autocomplete(:tags) do |autocomplete| %>
+    <% autocomplete.with_text_field(label: "Tags", placeholder: "Search") do |c| %>
+      <% c.with_prefix do %>
+        <%= polaris_icon(name: "SearchIcon") %>
+      <% end %>
+    <% end %>
+
+    <% autocomplete.with_option(label: "Rustic", value: "rustic") %>
+    <% autocomplete.with_option(label: "Antique", value: "antique") %>
+    <% autocomplete.with_option(label: "Vinyl", value: "vinyl") %>
+    <% autocomplete.with_option(label: "Vintage", value: "vintage") %>
+    <% autocomplete.with_option(label: "Refurbished", value: "refurbished") %>
+  <% end %>
+<% end %>

test/helpers/polaris/form_builder_test.rb

@@ -5,7 +5,7 @@ class Polaris::ViewHelperTest < ActionView::TestCase
 
   class Product
     include ActiveModel::Model
-    attr_accessor :title, :status, :accept, :access, :selected_markets
+    attr_accessor :title, :status, :accept, :access, :selected_markets, :tags
 
     validates :title, presence: true
   end
@@ -147,4 +147,23 @@ class Product
       end
     end
   end
+
+  test "#polaris_autocomplete" do
+    @rendered_content = @builder.polaris_autocomplete(:tags) do |autocomplete|
+      autocomplete.with_text_field(label: "Tags", placeholder: "Search")
+
+      autocomplete.with_option(label: "Rustic", value: "rustic")
+      autocomplete.with_option(label: "Antique", value: "antique")
+      autocomplete.with_option(label: "Vinyl", value: "vinyl")
+      autocomplete.with_option(label: "Vintage", value: "vintage")
+      autocomplete.with_option(label: "Refurbished", value: "refurbished")
+    end
+
+    assert_selector ".Polaris-Label" do
+      assert_selector "label", text: "Tags"
+    end
+    assert_selector ".Polaris-TextField" do
+      assert_selector %(input[name="product[tags]"])
+    end
+  end
 end