Textarea with matTextareaAutosize has spinner arrows

[EamonKavanagh]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

textarea element with matTextareaAutosize should not have spinner arrows

What is the current behavior?

textarea element with matTextareaAutosize has spinner arrows that go away after entering the first character

What are the steps to reproduce?

https://stackblitz.com/edit/angular-talhyo

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Chrome Version 65.0.3325.146

Is there anything else we should know?

[donroyco]

What do you mean with 'spinner arrows'? Do you have a screenshot?

[EamonKavanagh]

[WizardPC]

Personally, I don't reproduce with your stackblitz on Chrome & Firefox.

[EamonKavanagh]

Weird, I definitely see exactly the screenshot I posted from the link I provided.

I was able to create it by taking the example here and removing matAutosizeMinRows="2" andmatAutosizeMAxRows="5".

[donroyco]

@EamonKavanagh Not showing up here, Google Chrome, latest version.

[EamonKavanagh]

Interesting. Confirming I don't see it in Firefox but in Chrome Version 65.0.3325.146 I do see it.

[oskardudycz]

I have same issue. It might be related with placing that on flex layout or combination with input values. My markup:

<div class="section-container">
    <mat-form-field class="full-width">
          <textarea
            id="item-description"
            matTextareaAutosize 
            matInput
            [placeholder]="'DESCRIPTION_PLACEHOLDER' | translate | uppercase"
            [formControl]="descriptionControl"
          >
          </textarea>
    </mat-form-field>
</div>

As a temporary workaround, such css could be use:

textarea.mat-autosize { resize: auto !important; overflow: hidden !important; }

Ugly, but it works...

[EamonKavanagh]

I am able to reproduce without flex layout but it seems to be specific to the version of Chrome I'm on. See https://stackblitz.com/edit/angular-talhyo?file=app%2Finput-autosize-textarea-example.html for how I reproduced it.

[mmalerba]

I'm able to repro on Chrome 65.0.3325.181. It looks like the height isn't calculated quite right when there's a blank line. The textarea always seems to grow a pixel or 2 when I type the first character on a new line. Though I don't see the scrollbars on Firefox, it does display the same jitter when typing the first character

[oskardudycz]

@mmalerba any update on that?