fix(input): avoid repeat accesses to check if element is a textarea (#…

…19115)

Since the node's type can't change, it's unnecessary to check the DOM in the `_isTextarea` on every invocation. This affects the MDC form field in particular since it's used in a data binding.

src/material-experimental/mdc-input/input.ts

@@ -25,7 +25,7 @@ import {MatInput as BaseMatInput} from '@angular/material/input';
     '[class.mat-form-field-autofill-control]': 'false',
     '[class.mat-input-element]': 'false',
     '[class.mat-input-server]': '_isServer',
-    '[class.mat-mdc-textarea-input]': '_isTextarea()',
+    '[class.mat-mdc-textarea-input]': '_isTextarea',
     // Native input properties that are overwritten by Angular inputs need to be synced with
     // the native input element. Otherwise property bindings for those don't work.
     '[id]': 'id',

src/material/input/input.ts

@@ -96,10 +96,13 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
   _ariaDescribedby: string;
 
   /** Whether the component is being rendered on the server. */
-  _isServer = false;
+  readonly _isServer: boolean;
 
   /** Whether the component is a native html select. */
-  _isNativeSelect = false;
+  readonly _isNativeSelect: boolean;
+
+  /** Whether the component is a textarea. */
+  readonly _isTextarea: boolean;
 
   /**
    * Implemented as part of MatFormFieldControl.
@@ -182,7 +185,7 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
     // When using Angular inputs, developers are no longer able to set the properties on the native
     // input element. To ensure that bindings for `type` work, we need to sync the setter
     // with the native property. Textarea elements don't support the type property or attribute.
-    if (!this._isTextarea() && getSupportedInputTypes().has(this._type)) {
+    if (!this._isTextarea && getSupportedInputTypes().has(this._type)) {
       (this._elementRef.nativeElement as HTMLInputElement).type = this._type;
     }
   }
@@ -234,6 +237,7 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
     super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
 
     const element = this._elementRef.nativeElement;
+    const nodeName = element.nodeName.toLowerCase();
 
     // If no input value accessor was explicitly specified, use the element as the input value
     // accessor.
@@ -264,7 +268,8 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
     }
 
     this._isServer = !this._platform.isBrowser;
-    this._isNativeSelect = element.nodeName.toLowerCase() === 'select';
+    this._isNativeSelect = nodeName === 'select';
+    this._isTextarea = nodeName === 'textarea';
 
     if (this._isNativeSelect) {
       this.controlType = (element as HTMLSelectElement).multiple ? 'mat-native-select-multiple' :
@@ -344,11 +349,6 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
     // FormsModule or ReactiveFormsModule, because Angular forms also listens to input events.
   }
 
-  /** Determines if the component host is a textarea. */
-  _isTextarea() {
-    return this._elementRef.nativeElement.nodeName.toLowerCase() === 'textarea';
-  }
-
   /** Does some manual dirty checking on the native input `value` property. */
   protected _dirtyCheckNativeValue() {
     const newValue = this._elementRef.nativeElement.value;

tools/public_api_guard/material/input.d.ts

@@ -9,8 +9,9 @@ export declare class MatInput extends _MatInputMixinBase implements MatFormField
     protected _disabled: boolean;
     protected _elementRef: ElementRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
     protected _id: string;
-    _isNativeSelect: boolean;
-    _isServer: boolean;
+    readonly _isNativeSelect: boolean;
+    readonly _isServer: boolean;
+    readonly _isTextarea: boolean;
     protected _neverEmptyInputTypes: string[];
     protected _platform: Platform;
     protected _previousNativeValue: any;
@@ -44,7 +45,6 @@ export declare class MatInput extends _MatInputMixinBase implements MatFormField
     _focusChanged(isFocused: boolean): void;
     protected _isBadInput(): boolean;
     protected _isNeverEmpty(): boolean;
-    _isTextarea(): boolean;
     _onInput(): void;
     protected _validateType(): void;
     focus(options?: FocusOptions): void;