Select

Event

Subscribe to value changes from LiveView (on_value_change) or the client (CustomEvent and hook).

On Value Change (Server)

Time	Source	Value
No event yet. Interact with the components to receive new events

    <.select
  class="select"
  items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}
  on_value_change="select_changed"
>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

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

On Value Change (Client)

Time	Source	Value
No event yet. Interact with the components to receive new events

    <.select
  id="select-events-client"
  class="select"
  items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}
  on_value_change_client="select-changed"
>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

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

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