Combobox · Event
Subscribe to value changes from LiveView or the client.
On Value Change (Server)
| Time | Source | Value |
|---|---|---|
|
No event yet. Interact with the components to receive new events |
||
<.combobox
class="combobox"
placeholder="Select"
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
On Value Change (Client)
| Time | Source | Value |
|---|---|---|
|
No event yet. Interact with the components to receive new events |
||
<.combobox
class="combobox"
placeholder="Select"
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)
);
On Open Change (Server)
| Time | Source | Value |
|---|---|---|
|
No event yet. |
||
<.combobox
class="combobox"
placeholder="Select"
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
On Open Change (Client)
| Time | Source | Value |
|---|---|---|
|
No event yet. |
||
<.combobox
class="combobox"
placeholder="Select"
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));