outlined text field broken

[mptyspace]

<mdc-text-field label="help" outlined></mdc-text-field>

This simple line spits out the following:

ERROR Error: "Uncaught (in promise): TypeError: this._input is undefined
_getInputElement@http://localhost:4200/vendor.js:19361:9
isFocused@http://localhost:4200/vendor.js:18963:78
./node_modules/@material/textfield/foundation.js/MDCTextFieldFoundation.prototype.init@http://localhost:4200/vendor.js:121507:27
init@http://localhost:4200/vendor.js:19082:26
layout@http://localhost:4200/vendor.js:19246:14
set outlined@http://localhost:4200/vendor.js:18712:18
setInputsFromAttrs@http://localhost:4200/vendor.js:54148:37
instantiateAllDirectives@http://localhost:4200/vendor.js:53855:13
createDirectivesInstances@http://localhost:4200/vendor.js:53088:5
ɵɵelementStart@http://localhost:4200/vendor.js:61701:9
ɵɵelement@http://localhost:4200/vendor.js:61757:5
MyComponent_Template@http://localhost:4200/example-page-example-page-module.js:213:52

Angular MDC Version used: 5.0.0

"dependencies": {
    "@angular-mdc/web": "^5.0.0",
    "@angular/animations": "~9.0.0",
    "@angular/common": "~9.0.0",
    "@angular/compiler": "~9.0.0",
    "@angular/core": "~9.0.0",
    "@angular/forms": "~9.0.0",
    "@angular/platform-browser": "~9.0.0",
    "@angular/platform-browser-dynamic": "~9.0.0",
    "@angular/router": "~9.0.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },

[trimox]

Hi @mptyspace Can you provide reproducible source? The text field outlined variant is used extensively on the demo app without issue.

[mrp67]

I am also getting a similar error with an outlined attribute on the mdc-text-field:

Example:

<mdc-text-field
  label="Email"
  outlined
  formControlName="email"
  ></mdc-text-field>

Error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined
TypeError: Cannot read property 'nativeElement' of undefined
    at MdcTextField._getInputElement (textfield.js:923)
    at Object.isFocused (textfield.js:525)
    at MDCTextFieldFoundation.push../node_modules/@material/textfield/foundation.js.MDCTextFieldFoundation.init (foundation.js:132)
    at MdcTextField.init (textfield.js:644)
    at MdcTextField.layout (textfield.js:808)
    at MdcTextField.set outlined [as outlined] (textfield.js:274)
    at setInputsFromAttrs (core.js:12941)
    at instantiateAllDirectives (core.js:12648)
    at createDirectivesInstances (core.js:11881)
    at ɵɵelementStart (core.js:20943)
    at resolvePromise (zone-evergreen.js:793)
    at resolvePromise (zone-evergreen.js:752)
    at zone-evergreen.js:854
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:40744)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:570)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:485)
    at invokeTask (zone-evergreen.js:1596)

Removing the outlined attribute resolved the error, but then the text field is no longer an outlined text field

[mrp67]

Update:

It seems to be an issue with boolean attribute coercion. In past versions, putting just outlined on the text field worked. I was able to resolve the error by using [outlined]="true" instead. Alternatively, the injection options work too:

 providers: [
    {
      provide: MDC_TEXT_FIELD_DEFAULT_OPTIONS,
      useFactory: () => defaultOptions
    },
    {
      provide: MDC_SELECT_DEFAULT_OPTIONS,
      useFactory: () => defaultOptions
    }
  ]

[mptyspace]

Hmm, that would make sense. Must be some package is causing issues, I'll see if I can fix it locally tomorrow by equalizing the my app with the demo.

[trimox]

@mrp67 Thank you for investigating this! Could you also verify the version value in <project>/node_modules/@angular/cdk/package.json? Expecting to match "version": "9.0.0",

[mrp67]

@trimox just checked it matches 9.0.0 for @angular/cdk

[trimox]

@mrp67 Great thanks for confirming. Investigating as potential race condition scenario in layout(). Digging further..

[trimox]

Duplicated.

[trimox]

Got it. PR incoming

[trimox]

@mptyspace @mrp67 Grab v5.0.2 which contains fix. Thanks again!