Skip to content

Fix auto-height textarea collapsing to 2px when shown - #59

Merged
skartknet merged 1 commit into
skartknet:mainfrom
suedeapple:feature/textarea-auto-height-fix
Oct 14, 2026
Merged

skartknet merged 1 commit into
skartknet:mainfrom
suedeapple:feature/textarea-auto-height-fix

Conversation

@suedeapple

Copy link
Copy Markdown

Fixes #58

What

A textarea set to auto height that starts out hidden by a Conditional Displayer now appears at the right height when it's shown, instead of collapsing to about 2px.

Why

uui-textarea measures its auto height once, when it's added to the page. If the property is display: none at that point, it measures as 0 and sets its height to 2px. When toggleElements later removes display: none, nothing measures it again.

How

In toggleElements, when an element that was hidden is shown again, refreshAutoHeightTextareas finds any uui-textarea[auto-height] inside it and calls the textarea's own autoUpdateHeight() on the next animation frame, once it's visible.

  • This covers properties and groups, since both are hidden with display: none. Tabs don't need it, because only the tab button is hidden and a tab's content is rendered when you open it.
  • It only runs for elements that were actually hidden, so textareas that are already visible are left alone.
  • It uses the textarea's own resize function rather than repeating its sizing logic.

Testing

Tested on the TestWebV17 site (Umbraco 17.4): a CD Dropdown switches from a media picker to a textarea that was hidden on load.

Before After
Before After

The textarea's measured height went from 2px before the fix to 104px after (all five lines visible).

uui-textarea measures its auto height when connected. If the property is
hidden with display: none at that point it collapses to ~2px and never
re-measures. Re-run autoUpdateHeight() on any auto-height textareas when a
hidden property or group is shown again.

Fixes skartknet#58
@skartknet
skartknet merged commit 74d1f09 into skartknet:main Oct 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Auto-height textarea collapses to ~2px when shown by a Conditional Displayer

2 participants