diff --git a/assets/controllers/utility/autogrow_textarea_controller.js b/assets/controllers/utility/autogrow_textarea_controller.js new file mode 100644 index 0000000..b6cb64e --- /dev/null +++ b/assets/controllers/utility/autogrow_textarea_controller.js @@ -0,0 +1,27 @@ +import { Controller } from '@hotwired/stimulus'; + +/** + * Auto-grow textarea controller + * Makes textareas automatically resize to fit their content + */ +export default class extends Controller { + connect() { + // Set initial height + this.resize(); + + // Listen for input changes + this.element.addEventListener('input', () => this.resize()); + + // Also resize on focus (in case content was changed programmatically) + this.element.addEventListener('focus', () => this.resize()); + } + + resize() { + // Reset height to auto to get the correct scrollHeight + this.element.style.height = 'auto'; + + // Set height to scrollHeight to fit all content + this.element.style.height = this.element.scrollHeight + 'px'; + } +} +