Skip to content

fix(cdk/text-field): avoid page jump on auto-resize #32605

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CorentinDeBoisset wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(cdk/text-field): avoid page jump on auto-resize #32605

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/cdk/text-field/autosize.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,14 +237,14 @@ export class CdkTextareaAutosize implements AfterViewInit, DoCheck, OnDestroy {
const element = this._textareaElement;
const previousMargin = element.style.marginBottom || '';
const isFirefox = this._platform.FIREFOX;
const needsMarginFiller = isFirefox && this._hasFocus;
Copy link
Member

@crisbeto crisbeto Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we still need the _hasFocus part of this check. Otherwise we'll end up applying the margin on elements the user isn't interacting with.

const needsMarginFiller = this._hasFocus;
const measuringClass = isFirefox
? 'cdk-textarea-autosize-measuring-firefox'
: 'cdk-textarea-autosize-measuring';

// In some cases the page might move around while we're measuring the `textarea` on Firefox. We
// In some cases the page might move around while we're measuring the `textarea`. We
// work around it by assigning a temporary margin with the same height as the `textarea` so that
// it occupies the same amount of space. See #23233.
// it occupies the same amount of space. See #23233 and #23834.
if (needsMarginFiller) {
element.style.marginBottom = `${element.clientHeight}px`;
}
Expand Down