Phx-blur with contenteditable

I was wondering if anyone has tried using the phx-blur with a contenteditable div? I have been fighting with it for a few hours and I can find no way to get the value within the div sent along with the event.

<div phx-blur="update_event" contenteditable="true">
Original Value

We don’t currently track content-editable elements. Since JS is going to be required one way or the other if you want to wire things up with a form, we may never handle this in LV itself. Fortunately JS hooks are there to meet your needs:

  <%= label f, :username %>
  <div contenteditable="true" 
    <%= %>
  <%= text_input f, :username, style: "display: none;" %>
  <%= error_tag f, :username %>
let Hooks = {}
Hooks.ContentEditable = {
    let form = this.el.closest("form")
    let targetInput = form.querySelector(`[name="${}"]`)
    this.el.addEventListener("input", e => {
      // push event to the server
      // this.pushEvent("update_event", {content: this.el.innerText})
      // or copy to hidden input and trigger parent form event
      targetInput.value = this.el.innerText
      targetInput.dispatchEvent(new Event("input", {bubbles: true}))

let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks})


replace addEventListener("input" with addEventListener("focusout" if you want to trigger on blur instead of keypress

1 Like

I hadn’t heard about hooks until this afternoon and hoped they might be answer. Thanks for your help and all the hard work on LiveView/Phoenix.

1 Like

I tried implementing a dropdown for a native Liveview custom multiselect component, but the main issue was that I wasn’t able to close the dropdown when blured, which was very confusing for the users. So I ended up using the Select2 library which works almost as I require but I had to do a lot of hacks to make it work. I’m curious if is there a way to implement something like this with pure Phoenix and Liveview? :thinking: :thinking:

Are you trying to make a multiple_select with contenteditable="true"?