Combobox · API
Programmatic selection from LiveView or the client.
Set Value (Client Binding)
<.action phx-click={Corex.Combobox.set_value("combobox-api-sv-client", ["bel"])}>Belgium</.action>
<.action phx-click={Corex.Combobox.set_value("combobox-api-sv-client", [])}>Clear</.action>
<.combobox
class="combobox"
placeholder="Select"
items={Corex.List.new(items_minimal())}
>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>
Set Value (Server)
<.action phx-click="combobox_api_set_value">Belgium</.action>
<.action phx-click="combobox_api_clear">Clear</.action>
<.combobox
class="combobox"
placeholder="Select"
items={Corex.List.new(items_minimal())}
>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>
def handle_event("combobox_api_set_value", _params, socket) do
{:noreply, Corex.Combobox.set_value(socket, "combobox-api-sv-server", ["bel"])}
end
def handle_event("combobox_api_clear", _params, socket) do
{:noreply, Corex.Combobox.set_value(socket, "combobox-api-sv-server", [])}
end
Set Value (Client JS)
const el = document.getElementById("combobox-api-sv-js");
el?.dispatchEvent(
new CustomEvent("corex:combobox:set-value", {
bubbles: false,
detail: { value: ["deu"] },
})
);
el?.dispatchEvent(
new CustomEvent("corex:combobox:set-value", {
bubbles: false,
detail: { value: [] },
})
);