Update custom select to allow empty option

`choices` param is now forced to be an Array, as it will be easier to
include blank option in an array. Previously it implicitly allowed it to
be html safe string containing markup for options as well, but using
arrays is a lot easier.

Author: chaimann

admin/app/components/solidus_admin/ui/forms/select/component.rb

@@ -50,6 +50,9 @@ class SolidusAdmin::UI::Forms::Select::Component < SolidusAdmin::BaseComponent
   #   loading next page of results. Default: "Loading more results".
   # @option attributes [String] :"data-no-results-message" which text to show when there are no search results returned.
   #   Default: "No results found".
+  # @option attributes [true, String] :include_blank if passed, an empty option will be prepended to the list of options.
+  #   Pass +true+ for empty option with no text, or +String+ for the text to be shown as empty option.
+  # @raise [ArgumentError] if +choices+ is not an array
   def initialize(label:, name:, choices:, src: nil, size: :m, hint: nil, tip: nil, error: nil, **attributes)
     @label = label
     @hint = hint
@@ -76,10 +79,17 @@ def before_render
   end
 
   def prepare_options(choices:, src:)
+    raise ArgumentError, "`choices` must be an array" unless choices.is_a?(Array)
+
     if src.present?
       @attributes[:"data-src"] = src
     end
 
+    if (blank_option = @attributes.delete(:include_blank))
+      blank_option = "" if blank_option == true
+      choices.unshift([blank_option, ""])
+    end
+
     @options_collection = options_for_select(choices, @attributes.delete(:value))
   end
 

admin/app/javascript/solidus_admin/web_components/solidus_select.js

@@ -44,6 +44,7 @@ class SolidusSelect extends HTMLSelectElement {
       dropdownContentClass: "dropdown-content",
       optionClass: "option",
       wrapperClass: "wrapper",
+      allowEmptyOption: true,
       maxOptions: null,
       refreshThrottle: 0,
       plugins: {

admin/spec/components/previews/solidus_admin/ui/forms/select/component_preview.rb

@@ -39,12 +39,15 @@ def remote_with_pagination(multiple: false, latency: false, loading_message: nil
   # @param disabled toggle
   # @param error toggle
   # @param include_blank toggle
+  # @param blank_option text
   # @param placeholder text
   # @param hint text
   # @param tip text
-  def playground(size: "m", options: 3, multiple: false, selected: false, disabled: false, error: false, include_blank: true, placeholder: nil, hint: nil, tip: nil)
+  def playground(size: "m", options: 3, multiple: false, selected: false, disabled: false, error: false, include_blank: false, blank_option: nil, placeholder: nil, hint: nil, tip: nil)
     options = (1..options).map { |i| ["Option #{i}", i] }
-    options.unshift(["None", ""]) if include_blank
+    if include_blank && blank_option.present?
+      include_blank = blank_option
+    end
 
     render component("ui/forms/select").new(
       label: "Label",
@@ -57,7 +60,8 @@ def playground(size: "m", options: 3, multiple: false, selected: false, disabled
       value: (multiple && [1, 2] || 1 if selected),
       multiple:,
       disabled:,
-      placeholder:
+      placeholder:,
+      include_blank:
     )
   end
 end

admin/spec/components/previews/solidus_admin/ui/forms/select/component_preview/overview.html.erb

@@ -3,7 +3,7 @@
     <div class="flex flex-col flex-grow gap-2">
       <h3>Single</h3>
 
-      <% default_params = { label: "Country", name: "country", choices: ["", "Denmark", "Sweden"] } %>
+      <% default_params = { label: "Country", name: "country", choices: %w[Denmark Sweden] } %>
 
       <div class="mb-8">
         <h6 class="text-gray-500 mb-3 mt-0">Default</h6>
@@ -51,7 +51,7 @@
     <div class="flex flex-col flex-grow gap-2">
       <h3>Multiple</h3>
 
-      <% default_params = { label: "Countries", name: "countries", choices: ["", "Denmark", "Sweden", "United Kingdom"], multiple: true } %>
+      <% default_params = { label: "Countries", name: "countries", choices: ["Denmark", "Sweden", "United Kingdom"], multiple: true } %>
 
       <div class="mb-8">
         <h6 class="text-gray-500 mb-3 mt-0">Default</h6>