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
13 changes: 4 additions & 9 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,17 +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;
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.
if (needsMarginFiller) {
element.style.marginBottom = `${element.clientHeight}px`;
}
// it occupies the same amount of space. See #23233 and #23834.
element.style.marginBottom = `${element.clientHeight}px`;

// Reset the textarea height to auto in order to shrink back to its default size.
// Also temporarily force overflow:hidden, so scroll bars do not interfere with calculations.
Expand All @@ -257,9 +254,7 @@ export class CdkTextareaAutosize implements AfterViewInit, DoCheck, OnDestroy {
const scrollHeight = element.scrollHeight - 4;
element.classList.remove(measuringClass);

if (needsMarginFiller) {
element.style.marginBottom = previousMargin;
}
element.style.marginBottom = previousMargin;

return scrollHeight;
}
Expand Down