fix(ui): Make texarea fields autoresize

ClarifiedSecurity · Mar 15, 2024 · f6875ff · f6875ff
1 parent b38cefb
commit f6875ff
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 3 deletions.
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
@@ -6,7 +6,9 @@ registerControllers(application, controllers);
 
 import { Dropdown, Modal } from "tailwindcss-stimulus-components";
 import Clipboard from "stimulus-clipboard";
+import TextareaAutogrow from 'stimulus-textarea-autogrow'
 
 application.register("dropdown", Dropdown);
 application.register("modal", Modal);
 application.register("clipboard", Clipboard);
+application.register('textarea-autogrow', TextareaAutogrow);
diff --git a/app/views/actors/_actor.html.haml b/app/views/actors/_actor.html.haml
@@ -15,7 +15,7 @@
             = f.input :name
             = f.input :abbreviation
 
-          .py-1= f.input :description
+          .py-1= f.input :description, input_html: { data: { controller: "textarea-autogrow" } }
           .py-1= f.input :number, hint: 'How many cloned instances this actor has'
 
   = render ColumnFormSectionComponent.new do |c|

diff --git a/app/views/customization_specs/_customization_spec.html.haml b/app/views/customization_specs/_customization_spec.html.haml
@@ -46,7 +46,7 @@
 
         .grow
           = form.label :description, class: 'block font-bold text-gray-700 dark:text-gray-200'
-          = form.text_area :description, class: 'form-input'
+          = form.text_area :description, class: 'form-input', data: { controller: "textarea-autogrow" }
 
     .mt-2
       = form.label :capability_ids, Capability.model_name.human.pluralize, class: 'block font-bold text-gray-700 dark:text-gray-200'

diff --git a/app/views/virtual_machines/_form.html.haml b/app/views/virtual_machines/_form.html.haml
@@ -17,7 +17,7 @@
             = f.input :visibility, collection: visibility_modes, include_blank: false, input_html: { data: { controller: 'select' } }
 
           = f.association :system_owner, collection: @system_owners, input_html: { data: { controller: 'select' } }
-          = f.input :description
+          = f.input :description, input_html: { data: { controller: "textarea-autogrow" } }
 
     .py-5
       .border-t.border-gray-200.dark:border-gray-600

diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "postcss-nesting": "^12.1.0",
     "postcss-preset-env": "^9.5.0",
     "stimulus-clipboard": "^4.0.1",
+    "stimulus-textarea-autogrow": "^4.1.0",
     "stimulus-use": "^0.52.2",
     "stimulus-vite-helpers": "^3.1.0",
     "tailwindcss": "^3.4.1",

diff --git a/yarn.lock b/yarn.lock
@@ -3590,6 +3590,7 @@ __metadata:
     postcss-nesting: "npm:^12.1.0"
     postcss-preset-env: "npm:^9.5.0"
     stimulus-clipboard: "npm:^4.0.1"
+    stimulus-textarea-autogrow: "npm:^4.1.0"
     stimulus-use: "npm:^0.52.2"
     stimulus-vite-helpers: "npm:^3.1.0"
     tailwindcss: "npm:^3.4.1"
@@ -3873,6 +3874,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stimulus-textarea-autogrow@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "stimulus-textarea-autogrow@npm:4.1.0"
+  peerDependencies:
+    "@hotwired/stimulus": ^3.2.1
+  checksum: 10/74873053ab0da63607c40139559478fdf53c811ddfd6979178136fe517d70685c49caeeb6e4990c47f2c0d78e5522bf856cdc1c442f88eae1eafde1e0eed5070
+  languageName: node
+  linkType: hard
+
 "stimulus-use@npm:^0.52.2":
   version: 0.52.2
   resolution: "stimulus-use@npm:0.52.2"