Phx-blur with contenteditable

Phoenix Forum Questions / Help
, ,
1

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
</div>
2 Likes
2

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" 
       phx-hook="ContentEditable"
       phx-update="ignore"
       data-name="user[username]">
    <%= @changeset.data.username %>
  </div>
  <%= text_input f, :username, style: "display: none;" %>
  <%= error_tag f, :username %>

let Hooks = {}
Hooks.ContentEditable = {
  mounted(){
    let form = this.el.closest("form")
    let targetInput = form.querySelector(`[name="${this.el.dataset.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})

liveSocket.connect()
10 Likes
3

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

1 Like
4

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
5

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:

6

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