diff --git a/app/assets/stylesheets/application/components/input.scss b/app/assets/stylesheets/application/components/input.scss index 7a761a8b..1dfff916 100644 --- a/app/assets/stylesheets/application/components/input.scss +++ b/app/assets/stylesheets/application/components/input.scss @@ -18,6 +18,7 @@ border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); font-size: 16px; + resize: vertical; } } } diff --git a/app/javascript/controllers/auto_resize_controller.ts b/app/javascript/controllers/auto_resize_controller.ts new file mode 100644 index 00000000..8410f8a7 --- /dev/null +++ b/app/javascript/controllers/auto_resize_controller.ts @@ -0,0 +1,17 @@ +import { Controller } from '@hotwired/stimulus'; + +export default class extends Controller { + connect(): void { + this.#el.style.overflowY = 'hidden'; + this.update(); + } + + update(): void { + this.#el.style.height = 'auto'; + this.#el.style.height = this.#el.scrollHeight + 'px'; + } + + get #el(): HTMLInputElement { + return this.element as HTMLInputElement; + } +} diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index 183c3b28..00e35962 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -4,6 +4,9 @@ import { application } from "./application" +import AutoResizeController from "./auto_resize_controller.ts" +application.register("auto-resize", AutoResizeController) + import AutosubmittingController from "./autosubmitting_controller.ts" application.register("autosubmitting", AutosubmittingController) diff --git a/app/models/awesome_form.rb b/app/models/awesome_form.rb index 126d5e4a..be9f3f53 100644 --- a/app/models/awesome_form.rb +++ b/app/models/awesome_form.rb @@ -61,7 +61,7 @@ def render_input(method:, type:, collection:, id_method:, name_method:, options: when :string text_field method, options when :text - text_area method, options + text_area method, options.reverse_merge(data: {controller: "auto-resize", action: "input->auto-resize#update"}) when :password password_field method, options when :number