Editable

Event

Value change events (server + client).

Hex doc

Phoenix

On Value Change (Server)

Label

Edit me

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

    <.editable
  class="editable"
  value="Edit me"
  on_value_change="editable_changed"
>
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>
</.editable>

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

On Value Change (Client)

Label

Edit me

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

    <.editable
  class="editable"
  value="Edit me"
  on_value_change_client="editable-changed"
>
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" /></:cancel_trigger>
</.editable>

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

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