Skip to content

bug(cdkTextareaAutosize): autosize scrolls parent to top at each key hit with ngZoneEventCoalescing enabled #23834

@michael-hein

Description

@michael-hein

Reproduction

  1. open in chrome https://stackblitz.com/edit/angular-dqeq92?file=src%2Fapp%2Fdialog-content-example.html
  2. type a few line breaks or texts into the textarea until the the div's scrollbar appear
  3. scroll to the bottom and type more line breaks or text

Expected Behavior

The scroll position of the div should not be changed.

Actual Behavior

After each key hit the div gets scrolled to top. So its not possible to see what is currently typed.

Environment

  • Angular: 12.2.11
  • CDK/Material: 12.2.9
  • Browser(s): Chrome, Edge (Chromium), Opera
  • Operating System: Windows

When ngZoneEventCoalescing is set to false, it works in Chrome as expected.
It seems like its related to #23233. In firefox it works as expected.

When the firefox work around in the autosize Directive is used for chrome too, then it works fine. But I'm not really know, if it has some other side effects when using the work around for chrome too.

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
// 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`;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: cdk/text-field

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions