Bugs

** Unable to use codepen for server-side rendering example.

What MDC Web Version are you using?

0.40.1

What browser(s) is this bug affecting?

Server side rendering with Angular Universal

What OS are you using?

Windows

What are the steps to reproduce the bug?

Create Angular Universal Server and load page with a text-field.

What is the expected behavior?

No errors

What is the actual behavior?

ERROR TypeError: Cannot read property 'valid' of undefined

Any other information you believe would be useful?

The issue is that Domino, which is used by Angular Universal for Server Side Rendering, doesn't have a ValidityState object on it's HTMLInputElement implementation and the mdc-textfield foundation assumes that if NativeInput returns it will have a validity property that is an object. Foundation functions call validity.valid and validity.badInput without checking if the validity property exists and is an object.

Suggested Fix

This can be resolved by updating the getNativeInput_ function to spread the returned value into the defined default, instead of returning one or the other:

function getNativeInput_() {
  return /** @type {!NativeInputType} */ {
    value: '',
    disabled: false,
    validity: {
      badInput: false,
      valid: true,
    },
    ...this.adapter_.getNativeInput()
  };
}