I have a textarea in a liveview form, with a rows=XX attribute. The textarea is user resizable by a mouse drag. However, it looks like every time phx-change fired, the textarea will snap back to the original size. How do I prevent that? I want to keep the user dragged size.
I haven’t tried it yet, but do you assign the rows=XX attribute from your socket.assigns?
For example:
rows=<%= @textarea_rows %>
No. It was hard coded. Also the same thing will happen without a row=XX for the textarea; it will just snap back to the default.
I figured it out: Adding phx-update="ignore" to the textarea fixed it.
3 Likes
Yes, but if you refresh the page, it won’t retain that value unless you render it from your state, e.g. socket.assigns
You can create an HTML element resize listener, applied in a javascript Hooks and either store the value in browser storage or push an event to a handler in your module, to store it in socket.assigns, then render the height and width of the element, e.g. height=<%= @textarea_height %>
2 Likes
Here is a potential HTML element resize listener method
Thanks. I don’t have a need to persist user dragged size as a preference value; but I will keep that in mind.
