Phoenix_live_view: Resizable textareas reset their size after input

[cbrewster]

Environment

• Elixir version (elixir -v): 1.10.0
• Phoenix version (mix deps): 1.5.3
• Phoenix LiveView version (mix deps): 0.13.3
• NodeJS version (node -v): v14.3.0
• NPM version (npm -v): 6.14.4
• Operating system: macOS 10.15.4
• Browsers you attempted to reproduce this bug on (the more the merrier): Firefox, Safari,
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

If you resize a resizable textarea inside a form in a live view, the size will reset when you type in the textarea or any other form elements.

The browser adds inline styles to the textarea which override the width/height when resizing and it looks like live view removes these styles which resets the size of the live view.

<%= f = form_for @changeset, "#",
  id: "task-form",
  phx_target: @myself,
  phx_change: "validate",
  phx_submit: "save" %>
    <%= textarea f, :description %>
    <%= submit "Save", phx_disable_with: "Saving..." %>
</form>

Expected behavior

Typing in resized textareas does not cause the size of the textarea to be reset.

[chrismccord]

There's no good way for us to distinguish a style change on the client like this from any other client code. We could force the s style to be maintained, but then you would not be able to override it from the server. Your best bet today is to add a hook:

  <%= textarea f, :body, phx_hook: "MaintainAttrs", data_attrs: "style" %>

Hooks.MaintainAttrs = {
  attrs(){ return this.el.getAttribute("data-attrs").split(", ") },
  beforeUpdate(){ this.prevAttrs = this.attrs().map(name => [name, this.el.getAttribute(name)]) },
  updated(){ this.prevAttrs.forEach(([name, val]) => this.el.setAttribute(name, val)) }
}

Thanks!