diff --git a/assets/js/app.js b/assets/js/app.js
index 8581418..cbc6857 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -25,9 +25,13 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
+import MaintainAttrs from './maintain_attrs'
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let liveSocket = new LiveSocket("/live", Socket, {
+  params: { _csrf_token: csrfToken },
+  hooks: { MaintainAttrs }
+})
 
 // Show progress bar on live navigation and form submits
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
diff --git a/assets/js/maintain_attrs.js b/assets/js/maintain_attrs.js
new file mode 100644
index 0000000..68ba6d1
--- /dev/null
+++ b/assets/js/maintain_attrs.js
@@ -0,0 +1,8 @@
+// maintain user adjusted attributes, like textbox length on phoenix liveview
+// update. https://github.com/phoenixframework/phoenix_live_view/issues/1011
+
+export default {
+  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)) }
+}