Material-components-web-components: Add auto expand to <mwc-textfield> and <mwc-textarea>

[Sebastianhex]

I'm submitting a

• [ ] bug report
• [x] feature request

Proposed Properties/Attributes

| Name | Type | Description
| ------------------- | ---------------- |------------
| autoExpand | boolean | Overflow text causes the input container to automatically expand by adding visible rows.
| maxRows | number | Note: requires autoExpand to be set. Maximum number of visible text lines.

Example

<mwc-textfield label="Label" autoExpand maxRows="2"></mwc-textfield>

Expected behaviour

Other information

This behaviour is described under multi-line fields within the Material Design guidelines.

[e111077]

Not implemented in mdc. Not against it, but the spec is low on details on the outlined variant of this. Will need to get more info from designers

[rwestlund]

Any update on this? I have a need for it as well.

Here's my current hack: I have <mwc-textarea id="textarea" @input="${this.resize}">

async resize() {                                                               
    const outer = this.shadowRoot.getElementById("textarea");                      
    const inner = outer.shadowRoot.getElementById("text-field");               
    outer.rows = 3;                                                            
    await null;                                                                
    while (inner.scrollHeight > inner.offsetHeight) {                          
        outer.rows = outer.rows + 1;                                           
        await null;                                                            
    }                                                                          
} 

[e111077]

Hello, currently no update as most of our efforts are put into getting select out and architectural reworkings.

[davebernardy]

Any update on this one?

[asyncLiz]

There is no update, we will post in this issue if there is one.