Textfield fix ie (#491)

* IE fixes for textfield

* run formatter

* update changelog

CHANGELOG.md

@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 - `<mwc-drawer>` can now be used with Rollup (via version bump to pick up
   [WICG/inert#135](https://github.com/WICG/inert/pull/135)).
+- `<mwc-textfield>` and `<mwc-textarea>` can now have basic usability in IE.
 
 
 ## [0.8.0] - 2019-09-03

packages/textarea/src/mwc-textarea-base.ts

@@ -19,6 +19,7 @@ import {characterCounter} from '@material/mwc-textfield/character-counter/mwc-ch
 import {TextFieldBase} from '@material/mwc-textfield/mwc-textfield-base.js';
 import {html, property, query} from 'lit-element';
 import {classMap} from 'lit-html/directives/class-map';
+import {ifDefined} from 'lit-html/directives/if-defined.js';
 
 export {TextFieldType} from '@material/mwc-textfield/mwc-textfield-base.js';
 
@@ -50,6 +51,8 @@ export abstract class TextAreaBase extends TextFieldBase {
   }
 
   protected renderInput() {
+    const maxOrUndef = this.maxLength === -1 ? undefined : this.maxLength;
+
     return html`
       <textarea
           id="text-field"
@@ -60,7 +63,7 @@ export abstract class TextAreaBase extends TextFieldBase {
           ?disabled="${this.disabled}"
           placeholder="${this.placeholder}"
           ?required="${this.required}"
-          maxlength="${this.maxLength}"
+          maxlength="${ifDefined(maxOrUndef)}"
           @change="${this.handleInputChange}"
           @blur="${this.onInputBlur}">
       </textarea>`;

packages/textfield/src/mwc-textfield-base.ts

@@ -183,13 +183,13 @@ export abstract class TextFieldBase extends FormElement {
         nativeValidity: ValidityState) => Partial<ValidityState>)|null = null;
 
   focus() {
-    const focusEvt = new FocusEvent('focus');
+    const focusEvt = new CustomEvent('focus');
     this.formElement.dispatchEvent(focusEvt);
     this.formElement.focus();
   }
 
   blur() {
-    const blurEvt = new FocusEvent('blur');
+    const blurEvt = new CustomEvent('blur');
     this.formElement.dispatchEvent(blurEvt);
     this.formElement.blur();
   }
@@ -239,6 +239,8 @@ export abstract class TextFieldBase extends FormElement {
   }
 
   protected renderInput() {
+    const maxOrUndef = this.maxLength === -1 ? undefined : this.maxLength;
+
     return html`
       <input
           id="text-field"
@@ -248,7 +250,7 @@ export abstract class TextFieldBase extends FormElement {
           ?disabled="${this.disabled}"
           placeholder="${this.placeholder}"
           ?required="${this.required}"
-          maxlength="${this.maxLength}"
+          maxlength="${ifDefined(maxOrUndef)}"
           pattern="${ifDefined(this.pattern ? this.pattern : undefined)}"
           min="${ifDefined(this.min === '' ? undefined : this.min as number)}"
           max="${ifDefined(this.max === '' ? undefined : this.max as number)}"

test/src/unit/mwc-textfield.test.ts

@@ -139,7 +139,7 @@ suite('mwc-textfield:', () => {
 
       const transformFn =
           (value: string, vState: ValidityState): Partial<ValidityState> => {
-            if (value.includes('dogs')) {
+            if (value.indexOf('dogs') !== -1) {
               return {
                 valid: true,
               }