Material: Textarea in sidenav does not auto-grow

[mdenburger]

Actual Behavior:

• What is the issue? * A textarea in a closed sidenav does not autogrow when the sidenav is opened
• What is the expected behavior? The textarea should autogrow when the sidenav is opened

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/mdenburger/pen/gwXXqm
• Details: Both the left and right sidenav contain a textarea. Both should auto-grow. The left sidenav is locked open and auto-grow works fine there. The right sidenav is initially closed. When opened, the textarea should also auto-grow, but instead it remains a single row.

Angular Versions: *

• Angular Version: 1.5.8
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 53.0.2785.143 (64-bit)
• OS: * Ubuntu 16.04
• Stack Traces: None

[crisbeto]

The issue is that when the sidenav is hidden, the textarea can't measure it's height properly. There are a couple of ways you can get around this:

1. You can broadcast a md-resize-textarea event in your scope in order to trigger a resize manually, when the textarea is supposed to be visible. This is slightly inconvenient, but will perform better than option 2.
2. You can add the md-detect-hidden attribute to the textarea, which will look for height changes and resize accordingly. Note that this may affect your performance, because it will trigger a reflow on every digest.

Let me know if you need any help with implementing it.

[mdenburger]

I'm indeed using option 1 (broadcasting the md-resize-textarea event) as a solution. That's done by the sidenav's controller when the sidenav opens. Since the $mdSidenav service does not provide such an onOpen callback itself I had to add some custom plumbing code. IMHO it would be nicer if the framework handles this automatically, or provides more hooks (like onOpen for sidenavs).

[crisbeto]

It sort of handles it already by triggering the handlers for the window resize, but I don't think the textarea listens for that atm. Regarding more callbacks, we're in the process to switching to using the mdPanel API in as many components as possible and this should make it easier to have these kinds of callbacks.

[spotlightai]

@ crisbeto/ mdenburger can you please elaborate on how you implement the option 1? (broadcasting the md-resize-textarea event) thanks

[crisbeto]

In your sidenav's controller you have to do $scope.$broadcast('md-resize-textarea') @avarecruiting. Hopefully this won't be necessary once #9809 gets merged.