Tags Input · Event
Subscribe to value or validity changes from LiveView or a DOM listener.
Hex doc
Phoenix
On Value Change (Server)
lorem
duis
donec
| Time | Source | Value |
|---|---|---|
|
No event yet |
||
<.tags_input
class="tags-input"
value={["lorem", "duis", "donec"]}
on_value_change="tags_value_changed"
>
<:label>Tags</:label>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
def handle_event("tags_value_changed", %{"id" => id, "value" => value} = params, socket) when is_list(value) do
IO.inspect(params, label: "tags_value_changed")
{:noreply, socket}
end
On Value Change (Client)
lorem
duis
donec
| Time | Source | Value |
|---|---|---|
|
No event yet |
||
<.tags_input
class="tags-input"
value={["lorem", "duis", "donec"]}
on_value_change_client="tags-client-changed"
>
<:label>Tags</:label>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
const el = document.getElementById("tags-input-on-value-change-client");
el?.addEventListener("tags-client-changed", (e) => console.log(e.detail));
const el = document.getElementById("tags-input-on-value-change-client");
el?.addEventListener("tags-client-changed", (e: Event) =>
console.log((e as CustomEvent).detail)
);
On Value Invalid (Server)
lorem
duis
| Time | Source | DOM id | Reason |
|---|---|---|---|
|
No invalid event yet |
|||
<.tags_input
class="tags-input"
value={["lorem", "duis"]}
max={2}
allow_overflow={true}
on_value_invalid="tags_value_invalid"
>
<:label>Tags</:label>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
def handle_event("tags_value_invalid", %{"id" => id, "reason" => reason} = params, socket) do
IO.inspect(params, label: "tags_value_invalid")
{:noreply, socket}
end
On Value Invalid (Client)
lorem
duis
| Time | Source | DOM id | Reason |
|---|---|---|---|
|
No invalid event yet |
|||
<.tags_input
class="tags-input"
value={["lorem", "duis"]}
max={2}
allow_overflow={true}
on_value_invalid_client="tags-client-invalid"
>
<:label>Tags</:label>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
const el = document.getElementById("tags-input-on-value-invalid-client");
el?.addEventListener("tags-client-invalid", (e) => console.log(e.detail));
const el = document.getElementById("tags-input-on-value-invalid-client");
el?.addEventListener("tags-client-invalid", (e: Event) =>
console.log((e as CustomEvent).detail)
);