support textarea value update on phx-change

[bartekupartek]

Environment

• Elixir version (elixir -v): 1.10.0
• Phoenix version (mix deps): 1.4.12 and master
• Phoenix LiveView version (mix deps): 0.6.0 and master
• NodeJS version (node -v): 12.6.0
• NPM version (npm -v): 6.9.0
• Operating system: macOs Catalina

Actual behavior

Phoenix Live View should refresh value inside textarea tag on phx-change

<form phx-change="change">
  <textarea id="textarea" name="textarea_value">
      <%= @textarea_value %>
  </textarea>
</form>

I checked it for input tag value and it's working, but input tag doesn't fit expectations for large text editor.

Expected behavior

It should render textarea with updated content. I guess that DOM.mergeAttrs(target, source, ["value"]) is not valid for textarea due it doesn't have value attribute

[snewcomer]

👋 Do you think you might have an example application to provide us to help dig into this issue? We don't override the value when the input/textarea is already focused. See this commit - 5521443

https://html.spec.whatwg.org/multipage/form-elements.html#dom-textarea-value

[bartekupartek]

it works on blur, but I think for textarea it should update value and keep watching users cursor in the same position, like in Google Docs 😊

[bartekupartek]

I've been debugging for some time, but I can't make it working by just reverting 5521443, perhaps should it be parameterized if we'd like to update input field when focused eg. phx-update-on-focus="true"?

[chrismccord]

we don't overwrite the user's input if they have focus, but for now you could accomplish this with a hook:

  <textarea id="textarea" name="textarea_value" data-pending-val="<%= @textarea_value %>" phx-hook="MyTextArea">
      <%= @textarea_value %>
  </textarea>

Hooks.MyTextArea = {
  updated(){
    // + cursor reposition logic
    this.el.value = this.el.dataset["pending-val"]
  }
}

As this is not a bug and be accomplished with current features, closing for now. I may consider something like phx-update-on-focus="true", but it will likely need custom behavior such as cursor handling, re-selecting highlighted regions, etc, which will be app dependent, so a hook may be the best option in the end. Thanks!

[bartekupartek]

@chrismccord Thank you for response 😉 I've tried your custom hook but it also doesn't update until field is focused, when cursor is outside updated event is triggered properly.

[dkarter]

For anyone bumping into this - Chris' solution worked! However the dataset attribute is camelCased:

Hooks.MyTextArea = {
  updated(){
    this.el.value = this.el.dataset.pendingVal;
  }
}

[walter]

Also adding a comment for people that come across this later. I had a similar problem with a form component that was having a select field not update because it had focus.

What worked for me as to add id to the form attributes that was distinct from the last processed version of the form. I.e. something like this:

<.form let={f} for={@changeset} phx_change="validate" phx_submit="save" id={@current_thing.id}>

Previously it was this:

<.form let={f} for={@changeset} phx_change="validate" phx_submit="save">

Adding the id, did the trick for my needs.