MOBILE-3320 core: Fix auto-rows when model is resetted

src/addons/mod/glossary/pages/edit/edit.html

@@ -41,7 +41,7 @@
                 <ion-label position="stacked" id="addon-mod-glossary-aliases-label">
                     {{ 'addon.mod_glossary.aliases' | translate }}
                 </ion-label>
-                <ion-textarea [(ngModel)]="options.aliases" rows="1" core-auto-rows
+                <ion-textarea [(ngModel)]="options.aliases" rows="1" [core-auto-rows]="options.aliases"
                     aria-labelledby="addon-mod-glossary-aliases-label" name="aliases">
                 </ion-textarea>
             </ion-item>

src/addons/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html

@@ -32,7 +32,8 @@
             <ion-label position="stacked">
                 {{ 'addon.mod_workshop_assessment_accumulative.dimensioncommentfor' | translate : {'$a': field.dimtitle } }}
             </ion-label>
-            <ion-textarea [(ngModel)]="selectedValues[n].peercomment" core-auto-rows></ion-textarea>
+            <ion-textarea [(ngModel)]="selectedValues[n].peercomment" [core-auto-rows]="selectedValues[n].peercomment">
+            </ion-textarea>
         </ion-item>
         <ion-item *ngIf="!edit" class="ion-text-wrap">
             <ion-label>

src/addons/mod/workshop/assessment/comments/component/addon-mod-workshop-assessment-strategy-comments.html

@@ -14,7 +14,8 @@
                     {{ 'addon.mod_workshop_assessment_comments.dimensioncommentfor' | translate : {'$a': field.dimtitle } }}
                 </span>
             </ion-label>
-            <ion-textarea [(ngModel)]="selectedValues[n].peercomment" core-auto-rows></ion-textarea>
+            <ion-textarea [(ngModel)]="selectedValues[n].peercomment" [core-auto-rows]="selectedValues[n].peercomment">
+            </ion-textarea>
             <core-input-errors *ngIf="fieldErrors['peercomment_' + n]" [errorText]="fieldErrors['peercomment_' + n]">
             </core-input-errors>
         </ion-item>

src/addons/mod/workshop/assessment/numerrors/component/addon-mod-workshop-assessment-strategy-numerrors.html

@@ -36,7 +36,7 @@
                 {{ 'addon.mod_workshop_assessment_numerrors.dimensioncommentfor' | translate : {'$a': field.dimtitle } }}
             </ion-label>
             <ion-textarea [(ngModel)]="selectedValues[n].peercomment" [name]="'peercomment_' + n"
-                core-auto-rows>
+                [core-auto-rows]="selectedValues[n].peercomment">
             </ion-textarea>
         </ion-item>
         <ion-item *ngIf="!edit" class="ion-text-wrap">

src/core/components/send-message-form/core-send-message-form.html

@@ -4,7 +4,7 @@
         [core-auto-focus]="showKeyboard"
         [placeholder]="placeholder"
         rows="1"
-        core-auto-rows
+        [core-auto-rows]="message"
         [(ngModel)]="message"
         name="message"
         (onResize)="textareaResized()"

src/core/directives/auto-rows.ts

@@ -12,41 +12,31 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Directive, ElementRef, HostListener, Output, EventEmitter, AfterViewInit } from '@angular/core';
+import { Directive, ElementRef, Output, EventEmitter, AfterViewInit, Input, OnChanges } from '@angular/core';
 
 /**
  * Directive to adapt a textarea rows depending on the input text. It's based on Moodle's data-auto-rows.
  *
  * @description
  * Usage:
- * <textarea class="core-textarea" [(ngModel)]="message" rows="1" core-auto-rows></textarea>
+ * <textarea class="core-textarea" [(ngModel)]="message" rows="1" [core-auto-rows]="message"></textarea>
  */
 @Directive({
     selector: 'textarea[core-auto-rows], ion-textarea[core-auto-rows]',
 })
-export class CoreAutoRowsDirective implements AfterViewInit {
+export class CoreAutoRowsDirective implements AfterViewInit, OnChanges {
 
     protected height = 0;
 
+    @Input('core-auto-rows') value?: string; // eslint-disable-line @angular-eslint/no-input-rename
     @Output() onResize: EventEmitter<void>; // Emit when resizing the textarea.
 
     constructor(protected element: ElementRef) {
         this.onResize = new EventEmitter();
     }
 
-    @HostListener('input') onInput(): void {
-        this.resize();
-    }
-
-    @HostListener('change') onChange(): void {
-        // Fired on reset. Wait to the change to be finished.
-        setTimeout(() => {
-            this.resize();
-        }, 300);
-    }
-
     /**
-     * Resize after content.
+     * Resize after initialized.
      */
     ngAfterViewInit(): void {
         // Wait for rendering of child views.
@@ -55,6 +45,18 @@ export class CoreAutoRowsDirective implements AfterViewInit {
         }, 300);
     }
 
+    /**
+     * Resize when content changes.
+     */
+    ngOnChanges(): void {
+        this.resize();
+
+        if (this.value === '') {
+            // Maybe the form was resetted. In that case it takes a bit to update the height.
+            setTimeout(() => this.resize(), 300);
+        }
+    }
+
     /**
      * Resize the textarea.
      */