Fix combobox field attribute not sending values to form params

Fixed #440

  - Remove `default: nil` from `attr :name` to match Phoenix core_components
    pattern, allowing `assign_new` to properly set name from form field
  - Add `assign_new(:name, fn -> nil end)` in non-field function heads
    for standalone usage without form
  - Fix JS createNewOption reply callback to update label and value
    independently instead of skipping when only label changes
  - Fix `_target: ["undefined"]` in phx-change by stopping search input
    event propagation to parent form
  - Extract `refreshSelectedDisplay` and `handleCreateReply` in JS hook

Author: shahryarjb

priv/assets/js/combobox.js

@@ -330,6 +330,7 @@ let Combobox = {
   },
 
   handleSearch(e) {
+    e.stopPropagation();
     this.clearCreateError();
     const query = e.target.value.toLowerCase();
     this.dropdownOptions = this.getDropdownOptions();
@@ -755,15 +756,40 @@ let Combobox = {
     }
   },
 
-  removeCreatedOption(selectOpt, optionEl, errorMsg) {
-    selectOpt.remove();
-    optionEl.remove();
-    this.setupOptionListeners();
+  refreshSelectedDisplay() {
     if (this.select.multiple) {
       this.updateMultipleSelectedDisplay();
     } else {
       this.updateSingleSelectedDisplay();
     }
+  },
+
+  handleCreateReply(reply, selectOpt, optionEl) {
+    if (reply.error) {
+      this.removeCreatedOption(selectOpt, optionEl, reply.error);
+      return;
+    }
+
+    if (reply.value) {
+      selectOpt.value = reply.value;
+      optionEl.setAttribute("data-combobox-value", reply.value);
+    }
+
+    if (reply.label) {
+      selectOpt.textContent = reply.label;
+      optionEl.querySelector("span").textContent = reply.label;
+    }
+
+    if (reply.value || reply.label) {
+      this.refreshSelectedDisplay();
+    }
+  },
+
+  removeCreatedOption(selectOpt, optionEl, errorMsg) {
+    selectOpt.remove();
+    optionEl.remove();
+    this.setupOptionListeners();
+    this.refreshSelectedDisplay();
     this.dispatchChangeEvent();
 
     if (errorMsg) {
@@ -835,24 +861,7 @@ let Combobox = {
       this.pushEvent(
         this.onCreateEvent,
         { id: this.el.id.replace(/-combo$/, ""), value: trimmed },
-        (reply) => {
-          if (reply.error) {
-            this.removeCreatedOption(selectOpt, optionEl, reply.error);
-            return;
-          }
-          if (reply.value && reply.value !== trimmed) {
-            selectOpt.value = reply.value;
-            selectOpt.textContent = reply.label || reply.value;
-            optionEl.setAttribute("data-combobox-value", reply.value);
-            optionEl.querySelector("span").textContent =
-              reply.label || reply.value;
-            if (this.select.multiple) {
-              this.updateMultipleSelectedDisplay();
-            } else {
-              this.updateSingleSelectedDisplay();
-            }
-          }
-        },
+        (reply) => this.handleCreateReply(reply, selectOpt, optionEl),
       );
     }
   },

priv/components/combobox.eex

@@ -86,7 +86,7 @@ defmodule <%= @module %> do
 
   @doc type: :component
   attr :id, :any, default: nil, doc: "A unique identifier is used to manage state and interaction"
-  attr :name, :any, default: nil, doc: "Name of input"
+  attr :name, :any, doc: "Name of input"
   attr :label, :string, default: nil
   attr :value, :any, doc: "Value of input"
   attr :field, Phoenix.HTML.FormField, doc: "a form field struct retrieved from the form"
@@ -164,6 +164,7 @@ defmodule <%= @module %> do
     assigns =
       assigns
       |> assign_new(:id, fn -> "combo-#{random_id()}" end)
+      |> assign_new(:name, fn -> nil end)
       |> assign_new(:options, fn -> [] end)
       |> assign_new(:option, fn -> [] end)
       |> assign_new(:value, fn -> Map.get(assigns, :value, []) end)
@@ -386,6 +387,7 @@ defmodule <%= @module %> do
     assigns =
       assigns
       |> assign_new(:id, fn -> "combo-#{random_id()}" end)
+      |> assign_new(:name, fn -> nil end)
       |> assign_new(:options, fn -> [] end)
       |> assign_new(:option, fn -> [] end)
       |> assign_new(:value, fn -> Map.get(assigns, :value) end)