fix(color-select): Do not prefill color picker value on init

Sometimes we do not want to save a color, because it is optional.

Author: tvdeyen

app/components/alchemy/ingredients/color_editor.rb

@@ -11,14 +11,15 @@ def input_field
               value,
               disabled: !editable?
             )
+            concat color_field_tag(nil, value, disabled: disabled?)
           else
             concat select_tag(
               form_field_name,
               color_options.join.html_safe,
               disabled: !editable?
             )
+            concat color_field_tag(form_field_name, value, disabled: disabled?)
           end
-          concat color_field_tag(form_field_name, value, disabled: disabled?)
         end
       end
 

app/javascript/alchemy_admin/components/color_select.js

@@ -21,11 +21,8 @@ class ColorSelect extends HTMLElement {
         this.#toggleColorPicker(event.val === "custom_color")
       )
     } else {
-      if (this.textInput) {
-        this.colorInput.addEventListener("input", this)
-        this.textInput.addEventListener("input", this)
-        this.textInput.value = this.colorInput.value
-      }
+      this.colorInput?.addEventListener("input", this)
+      this.textInput?.addEventListener("input", this)
       this.#toggleColorPicker(true)
     }
   }

spec/components/alchemy/ingredients/color_editor_spec.rb

@@ -34,8 +34,9 @@
   context "with no color option" do
     let(:settings) { {} }
 
-    it "renders a text input field with a color picker" do
+    it "renders a text input field and a color picker without name attribute" do
       is_expected.to have_selector("input[type='text'] + input[type='color']")
+      is_expected.to_not have_selector("input[type='color'][name]")
     end
   end