Event

    <.combobox
  class="combobox"
  translation={%Corex.Combobox.Translation{placeholder: "Select", empty: "No results"}}
  items={Corex.List.new(items_minimal())}
  on_value_change="combobox_changed"
>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>

  

    def handle_event("combobox_changed", %{"id" => id, "value" => value} = params, socket) do
  IO.inspect(params, label: "combobox_changed")
  {:noreply, socket}
end
  

    <.combobox
  class="combobox"
  translation={%Corex.Combobox.Translation{placeholder: "Select", empty: "No results"}}
  items={Corex.List.new(items_minimal())}
  on_value_change_client="combobox-changed"
>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>

  

    const el = document.getElementById("combobox-events-client-field");
el?.addEventListener("combobox-changed", (event) => console.log(event.detail));

  

    const el = document.getElementById("combobox-events-client-field");
el?.addEventListener("combobox-changed", (event: Event) =>
  console.log((event as CustomEvent<unknown>).detail)
);

  

    <.combobox
  class="combobox"
  translation={%Corex.Combobox.Translation{placeholder: "Select", empty: "No results"}}
  items={Corex.List.new(items_minimal())}
  on_open_change="combobox_open_changed"
>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>

  

    def handle_event("combobox_open_changed", params, socket) do
  IO.inspect(params, label: "combobox_open_changed")
  {:noreply, socket}
end
  

    <.combobox
  class="combobox"
  translation={%Corex.Combobox.Translation{placeholder: "Select", empty: "No results"}}
  items={Corex.List.new(items_minimal())}
  on_open_change_client="combobox-open-changed"
>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>

  

    const el = document.getElementById("combobox-events-open-client-field");
el?.addEventListener("combobox-open-changed", (event) => console.log(event.detail));

  

    <.combobox
  class="combobox"
  translation={%Corex.Combobox.Translation{placeholder: "Select", empty: "No results"}}
  filter={false}
  items={Corex.List.new(items_minimal())}
  on_input_value_change="combobox_input_changed"
>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>

  

    def handle_event("combobox_input_changed", params, socket) do
  IO.inspect(params, label: "combobox_input_changed")
  {:noreply, socket}
end
  

    <.combobox
  class="combobox"
  translation={%Corex.Combobox.Translation{placeholder: "Select", empty: "No results"}}
  items={Corex.List.new(items_minimal())}
  on_highlight_change="combobox_highlight_changed"
>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>

  

    def handle_event("combobox_highlight_changed", params, socket) do
  IO.inspect(params, label: "combobox_highlight_changed")
  {:noreply, socket}
end
  

    <.combobox
  class="combobox"
  translation={%Corex.Combobox.Translation{placeholder: "Select", empty: "No results"}}
  items={Corex.List.new(items_minimal())}
  on_select="combobox_selected"
>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>

  

    def handle_event("combobox_selected", params, socket) do
  IO.inspect(params, label: "combobox_selected")
  {:noreply, socket}
end