feature: Implement multiple option for select field

app/components/avo/fields/select_field/edit_component.html.erb

@@ -1,6 +1,7 @@
 <%= field_wrapper **field_wrapper_args do %>
   <%= @form.select @field.id, options_for_select(@field.options_for_select, selected: @field.value), {
-      include_blank: @field.include_blank
+      include_blank: @field.include_blank,
+      multiple: @field.multiple
     },
     aria: {
       placeholder: @field.placeholder

db/migrate/20250103192051_add_sizes_to_products.rb

@@ -0,0 +1,5 @@
+class AddSizesToProducts < ActiveRecord::Migration[6.1]
+  def change
+    add_column :products, :sizes, :string, array: true, default: []
+  end
+end

lib/avo/fields/select_field.rb

@@ -3,7 +3,7 @@ module Fields
     class SelectField < BaseField
       include Avo::Fields::FieldExtensions::HasIncludeBlank
 
-      attr_reader :display_value
+      attr_reader :display_value, :multiple
 
       def initialize(id, **args, &block)
         args[:placeholder] ||= I18n.t("avo.choose_an_option")
@@ -19,6 +19,7 @@ def initialize(id, **args, &block)
         end
 
         @enum = args[:enum]
+        @multiple = args[:multiple]
         @display_value = args[:display_value] || false
       end
 
@@ -55,6 +56,18 @@ def label
         display_value ? value : options.invert[value]
       end
 
+      def to_permitted_param
+        @multiple ? {"#{id}": []} : id
+      end
+
+      def fill_field(record, key, value, params)
+        if @multiple
+          value = value.reject(&:blank?)
+        end
+
+        super
+      end
+
       private
 
       def options

spec/dummy/app/avo/resources/product.rb

@@ -48,5 +48,6 @@ def fields
     field :description, as: :tiptap, placeholder: "Enter text", always_show: false
     field :image, as: :file, is_image: true
     field :category, as: :select, enum: ::Product.categories
+    field :sizes, as: :select, multiple: true, options: {Large: :large, Medium: :medium, Small: :small}
   end
 end

spec/dummy/db/schema.rb

@@ -10,9 +10,9 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[8.0].define(version: 2024_11_14_165947) do
+ActiveRecord::Schema[8.0].define(version: 2025_01_03_192051) do
   # These are extensions that must be enabled in order to support this database
-  enable_extension "plpgsql"
+  enable_extension "pg_catalog.plpgsql"
 
   create_table "action_text_rich_texts", force: :cascade do |t|
     t.string "name", null: false
@@ -173,12 +173,13 @@
     t.datetime "updated_at", null: false
     t.integer "price_cents", default: 0, null: false
     t.string "price_currency", default: "'USD'::character varying", null: false
+    t.string "sizes", default: [], array: true
   end
 
   create_table "projects", force: :cascade do |t|
     t.string "name"
     t.string "status"
-    t.string "stage"
+    t.string "stage", default: [], array: true
     t.string "budget"
     t.string "country"
     t.integer "users_required"

spec/features/avo/select_field_spec.rb

@@ -229,4 +229,34 @@ def test_array
       end
     end
   end
+  describe "when options are multiple select" do
+    context "new" do
+      it "allow selection of multiple values" do
+        visit avo.new_resources_product_path
+        expect(page).to have_select "product_sizes", multiple: true, options: ["Large", "Medium", "Small"]
+        select "Large", from: "product_sizes"
+        select "Medium", from: "product_sizes"
+        save
+        expect(Product.last.sizes).to match_array(["large", "medium"])
+      end
+    end
+    context "edit" do
+      let(:product) { create :product, sizes: [:large] }
+      it "allow changing of selected values" do
+        visit avo.edit_resources_product_path(product)
+        expect(page).to have_select "product_sizes", selected: ["Large"], multiple: true, options: ["Large", "Medium", "Small"]
+        select "Medium", from: "product_sizes"
+        select "Small", from: "product_sizes"
+        save
+        expect(Product.last.sizes).to match_array(["medium", "small", "large"])
+      end
+      it "allow deselecting of previously selected values" do
+        visit avo.edit_resources_product_path(product)
+        expect(page).to have_select "product_sizes", selected: ["Large"], multiple: true, options: ["Large", "Medium", "Small"]
+        page.unselect "Large", from: "Sizes"
+        save
+        expect(Product.last.sizes).to match_array([])
+      end
+    end
+  end
 end