Auto-Resizing Textarea

A drop-in text area that grows with the content instead of scrolling. Fits comments, notes, and message fields naturally, feels considerably more premium than a fixed-height scrolling box, and falls back to scrolling gracefully once an optional max height is reached.

1. Overview

Textareas don't grow on their own — the browser gives them a fixed height and a scrollbar. This component wraps a textarea in a small block that resizes it to fit the content on every change (including programmatic value changes) with an optional maximum height beyond which it scrolls.

Key features

• Grows and shrinks automatically as the user types or deletes.
• Optional max height with graceful scroll fallback.
• Configurable minimum rows.
• Resizes correctly when the value is set programmatically (form load, "clear" button, etc.).
• Emits an OnChange event so consumers keep their variables in sync.
• Accessible: keyboard-focusable with a visible focus ring; respects reduce-motion.
• No dependencies.

2. Compatibility

3. Installation

1. Install Auto-Resizing Textarea from the Forge (or the .oap via Service Center).
2. In Manage Dependencies, select the module and check the AutoResizeTextarea block (and the public Resize action if you want to trigger resizes yourself).
3. Apply and publish.

4. Quick start

AutoResizeTextarea
   Value       = MyText          // your variable, two-way bound via OnChange
   MinRows     = 3
   MaxHeightPx = 240              // optional cap; 0 = no cap
   Placeholder = "Write a note…"

Handle OnChange(NewValue):
   MyText = NewValue

Drop the block on a screen, bind Value to a variable, handle OnChange to save what the user types. The block does the rest.

5. Reference — the AutoResizeTextarea block

Resize action (public)

An escape hatch for cases where you set the underlying textarea's value outside the block's normal flow and want to trigger a resize. Takes one input, TargetId (Text) — usually the block's textarea id, exposed via the block if you need it. Most consumers never call this.

6. How it works

The block hooks the textarea's input and focus events on mount. On each of those (and after any change to the block's inputs), the height is reset to auto and then set to the element's scrollHeight — the browser's honest report of how tall the content wants to be. That reset-then-measure step is what makes the box shrink as content shrinks, not only grow.

The initial size honors MinRows. When MaxHeightPx is set and reached, the CSS switches to overflow-y: auto so very long content scrolls inside the box instead of pushing the page down forever.

7. Accessibility

The underlying element is a real HTML textarea, so it's keyboard-focusable, screen-reader friendly, and honors the browser's spellcheck and autocorrect. A visible focus ring is included by default. The growth transition is disabled when the user's system has "reduce motion" enabled.

8. Theming (optional)

The textarea is a plain element with the class art-ta. Override in your app theme:

.art-ta { border-color: #cbd5e1; border-radius: 12px; }
.art-ta:focus { border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.25); }

9. Troubleshooting / FAQ

The height doesn't update after I clear the value in code.The block re-fits on parameter changes, but if your write is happening outside the OutSystems change path, call the public Resize action after the write.

The box grows forever with long input.Set MaxHeightPx (for example, 240) — content past that height will scroll inside the box.

The initial size is wrong on load.The block sizes after render. If a value is set very late (e.g. asynchronously after the block mounts), call Resize once the value is in place.

There's no growth transition.The user's system may have "reduce motion" enabled — the transition is intentionally disabled in that case.

10. Best practices

• Use for comment boxes, notes, chat inputs, and other places where content length is unpredictable.
• Set MaxHeightPx so the box can't push page content out of view.
• Keep MinRows at 2 or more so the box doesn't look like a single-line input.
• Handle OnChange on every use — otherwise your bound variable won't reflect edits.

11. Version history