Phoenix_live_view: 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 - https://github.com/phoenixframework/phoenix_live_view/commit/5521443b1dd6488f0d9b18043e942608d8d61891

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 :blush:

[bartekupartek]

I've been debugging for some time, but I can't make it working by just reverting https://github.com/phoenixframework/phoenix_live_view/commit/5521443b1dd6488f0d9b18043e942608d8d61891, 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;
  }
}