From 5bf54645cd7ae7a2558c398d2504f2cfcd1f054e Mon Sep 17 00:00:00 2001 From: Monica Dinculescu Date: Tue, 27 Sep 2016 11:09:04 -0700 Subject: [PATCH 01/52] port to 2.0 --- bower.json | 38 ++++--- demo/index.html | 84 +++++++-------- demo/ssn-input.html | 101 +++++++++--------- paper-input-addon-behavior.html | 5 - paper-input-behavior.html | 9 -- paper-input-char-counter.html | 4 +- paper-input-container.html | 177 ++++++++++++++++---------------- paper-input-error.html | 8 +- paper-input.html | 131 +++++++++++++---------- paper-textarea.html | 17 +-- 10 files changed, 294 insertions(+), 280 deletions(-) diff --git a/bower.json b/bower.json index 9633dbdc..65ae10ff 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "paper-input", - "version": "1.1.23", + "version": "2.0.0", "description": "Material design text fields", "authors": [ "The Polymer Authors" @@ -28,24 +28,28 @@ "homepage": "https://github.com/PolymerElements/paper-input", "ignore": [], "dependencies": { - "polymer": "Polymer/polymer#^1.2.0", - "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^1.0.0", - "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0", - "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0", - "iron-input": "PolymerElements/iron-input#^1.0.0", - "paper-styles": "PolymerElements/paper-styles#^1.1.4", - "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0" + "polymer": "Polymer/polymer#2.0-preview", + "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#2.0-preview", + "iron-behaviors": "PolymerElements/iron-behaviors#2.0-preview", + "iron-input": "PolymerElements/iron-input#2.0-preview", + "paper-styles": "PolymerElements/paper-styles#2.0-preview", + "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#2.0-preview" }, "devDependencies": { - "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", - "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", - "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", - "iron-icon": "PolymerElements/iron-icon#^1.0.0", - "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0", - "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0", - "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0", - "test-fixture": "PolymerElements/test-fixture#^1.0.0", + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#2.0-preview", + "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview", + "iron-icon": "PolymerElements/iron-icon#2.0-preview", + "iron-icons": "PolymerElements/iron-icons#2.0-preview", + "iron-test-helpers": "PolymerElements/iron-test-helpers#2.0-preview", + "iron-validator-behavior": "PolymerElements/iron-validator-behavior#2.0-preview", + "paper-icon-button": "PolymerElements/paper-icon-button#2.0-preview", + "test-fixture": "PolymerElements/test-fixture#custom-elements-v1", "web-component-tester": "^4.0.0", - "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" + "webcomponentsjs": "webcomponents/webcomponentsjs#v1" + }, + "resolutions": { + "test-fixture": "custom-elements-v1", + "polymer": "2.0-preview", + "webcomponentsjs": "v1" } } diff --git a/demo/index.html b/demo/index.html index f84799de..b46d8938 100644 --- a/demo/index.html +++ b/demo/index.html @@ -22,7 +22,6 @@ - @@ -31,47 +30,45 @@ - + demo-snippet.horizontal { + --demo-snippet-demo: { + @apply --layout-horizontal; + @apply --layout-justified; + @apply --layout-wrap; + } + } + demo-snippet.horizontal paper-input { + display: inline-block; + } + +
@@ -79,6 +76,7 @@

Inputs can have different types, and be disabled

@@ -118,12 +117,13 @@

Inputs can have prefixes and suffixes

@@ -415,7 +418,7 @@ _inputSelector: { type: String, - value: 'input,textarea,.paper-input-input' + value: 'input,iron-input,textarea,.paper-input-input' }, _boundOnFocus: { @@ -484,7 +487,7 @@ } // Only validate when attached if the input already has a value. - if (this._inputElementValue != '') { + if (!!this._inputElementValue) { this._handleValueAndAutoValidate(this._inputElement); } else { this._handleValue(this._inputElement); @@ -541,6 +544,8 @@ _handleValueAndAutoValidate: function(inputElement) { if (this.autoValidate) { var valid; + + debugger if (inputElement.validate) { valid = inputElement.validate(this._inputElementValue); } else { diff --git a/paper-input-error.html b/paper-input-error.html index 645f1e72..6e89912c 100644 --- a/paper-input-error.html +++ b/paper-input-error.html @@ -39,10 +39,10 @@ display: inline-block; visibility: hidden; - color: var(--paper-input-container-invalid-color, --error-color); + color: var(--paper-input-container-invalid-color, var(--error-color)); - @apply(--paper-font-caption); - @apply(--paper-input-error); + @apply --paper-font-caption; + @apply --paper-input-error; position: absolute; left:0; right:0; @@ -53,7 +53,7 @@ }; - + diff --git a/paper-input.html b/paper-input.html index 2b795a01..307f1dc3 100644 --- a/paper-input.html +++ b/paper-input.html @@ -9,7 +9,6 @@ --> - @@ -82,20 +81,41 @@ display: none !important; } + input { + position: relative; /* to make a stacking context */ + outline: none; + box-shadow: none; + padding: 0; + width: 100%; + max-width: 100%; + background: transparent; + border: none; + color: var(--paper-input-container-input-color, var(--primary-text-color)); + -webkit-appearance: none; + text-align: inherit; + vertical-align: bottom; + + /* Firefox sets a min-width on the input, which can cause layout issues */ + min-width: 0; + + @apply --paper-font-subhead; + @apply --paper-input-container-input; + } + input::-webkit-input-placeholder { - color: var(--paper-input-container-color, --secondary-text-color); + color: var(--paper-input-container-color, var(--secondary-text-color)); } input:-moz-placeholder { - color: var(--paper-input-container-color, --secondary-text-color); + color: var(--paper-input-container-color, var(--secondary-text-color)); } input::-moz-placeholder { - color: var(--paper-input-container-color, --secondary-text-color); + color: var(--paper-input-container-color, var(--secondary-text-color)); } input:-ms-input-placeholder { - color: var(--paper-input-container-color, --secondary-text-color); + color: var(--paper-input-container-color, var(--secondary-text-color)); } label { @@ -105,54 +125,51 @@ - - - - - - - - - - - + + + + + + + + + + + + [[errorMessage]] + @@ -163,8 +180,12 @@ is: 'paper-input', behaviors: [ - Polymer.IronFormElementBehavior, Polymer.PaperInputBehavior - ] + ], + + attached: function() { + // HACK eeeek + this.$.input._initSlottedInput(); + } }); diff --git a/paper-textarea.html b/paper-textarea.html index e4f4ee1e..ef875b1c 100644 --- a/paper-textarea.html +++ b/paper-textarea.html @@ -10,7 +10,6 @@ - @@ -51,9 +50,9 @@ - + - - - - + + @@ -88,8 +82,7 @@ is: 'paper-textarea', behaviors: [ - Polymer.PaperInputBehavior, - Polymer.IronFormElementBehavior + Polymer.PaperInputBehavior ], properties: { From 146e5cffd7a9ecd01cd6072793ccafc631c09eb5 Mon Sep 17 00:00:00 2001 From: Monica Dinculescu Date: Wed, 5 Oct 2016 12:40:06 -0700 Subject: [PATCH 02/52] start fixing tests --- paper-input-behavior.html | 14 +- paper-input-container.html | 11 +- paper-input.html | 20 +- test/paper-input.html | 529 +++++++++++++++++++------------------ 4 files changed, 293 insertions(+), 281 deletions(-) diff --git a/paper-input-behavior.html b/paper-input-behavior.html index d639da4d..df34145d 100644 --- a/paper-input-behavior.html +++ b/paper-input-behavior.html @@ -52,7 +52,7 @@ /** * The value for this input. If you're using PaperInputBehavior to * implement your own paper-input-like element, bind this to - * the ``'s `bindValue` + * the ``'s `bindValue` * property, or the value property of your input that is `notify:true`. */ value: { @@ -389,20 +389,8 @@ return this.inputElement; }, - registered: function() { - // These types have some default placeholder text; overlapping - // the label on top of it looks terrible. Auto-float the label in this case. - this._typesThatHaveText = ["date", "datetime", "datetime-local", "month", - "time", "week", "file"]; - }, - attached: function() { this._updateAriaLabelledBy(); - - if (this.inputElement && - this._typesThatHaveText.indexOf(this.inputElement.type) !== -1) { - this.alwaysFloatLabel = true; - } }, _appendStringWithSpace: function(str, more) { diff --git a/paper-input-container.html b/paper-input-container.html index 62a92f81..14234c47 100644 --- a/paper-input-container.html +++ b/paper-input-container.html @@ -325,7 +325,7 @@
- +
@@ -477,16 +477,16 @@ } this.addEventListener('focus', this._boundOnFocus, true); this.addEventListener('blur', this._boundOnBlur, true); - }, - attached: function() { if (this.attrForValue) { this._inputElement.addEventListener(this._valueChangedEvent, this._boundValueChanged); } else { this.addEventListener('input', this._onInput); } + }, - // Only validate when attached if the input already has a value. + attached: function() { + //Only validate when attached if the input already has a value. if (!!this._inputElementValue) { this._handleValueAndAutoValidate(this._inputElement); } else { @@ -542,10 +542,9 @@ }, _handleValueAndAutoValidate: function(inputElement) { - if (this.autoValidate) { + if (this.autoValidate && inputElement) { var valid; - debugger if (inputElement.validate) { valid = inputElement.validate(this._inputElementValue); } else { diff --git a/paper-input.html b/paper-input.html index 307f1dc3..30e49c32 100644 --- a/paper-input.html +++ b/paper-input.html @@ -133,11 +133,11 @@ - diff --git a/test/paper-input.html b/test/paper-input.html index 77f68c58..c40ea6a1 100644 --- a/test/paper-input.html +++ b/test/paper-input.html @@ -125,271 +125,284 @@ From 8de90459a86b61cf8ceedc92022bba3e90872287 Mon Sep 17 00:00:00 2001 From: Monica Dinculescu Date: Mon, 10 Oct 2016 10:24:34 -0700 Subject: [PATCH 03/52] use iron-input-ready; fix more tests --- paper-input.html | 19 +- paper-textarea.html | 6 +- test/paper-input-char-counter.html | 3 +- test/paper-input-container.html | 52 +-- test/paper-input-error.html | 10 +- test/paper-input.html | 497 ++++++++++++++--------------- 6 files changed, 304 insertions(+), 283 deletions(-) diff --git a/paper-input.html b/paper-input.html index 30e49c32..6876d48a 100644 --- a/paper-input.html +++ b/paper-input.html @@ -123,7 +123,12 @@ } - + @@ -190,14 +195,20 @@ "time", "week", "file"]; }, - attached: function() { - // HACK eeeek - this.$.input._initSlottedInput(); + listeners: { + 'iron-input-ready': '_onIronInputReady' + }, + _onIronInputReady: function() { if (this.inputElement && this._typesThatHaveText.indexOf(this.$.nativeInput.type) !== -1) { this.alwaysFloatLabel = true; } + + // Only validate when attached if the input already has a value. + if (!!this.inputElement.bindValue) { + this.$.container._handleValueAndAutoValidate(this.inputElement); + } }, }); diff --git a/paper-textarea.html b/paper-textarea.html index ef875b1c..75a2c74f 100644 --- a/paper-textarea.html +++ b/paper-textarea.html @@ -48,7 +48,11 @@ } - + diff --git a/test/paper-input-char-counter.html b/test/paper-input-char-counter.html index 65d2d140..d3c7b327 100644 --- a/test/paper-input-char-counter.html +++ b/test/paper-input-char-counter.html @@ -82,7 +82,6 @@ test('character counter shows the value length with maxlength', function() { var input = fixture('textarea-with-max'); - forceXIfStamp(input); var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter'); assert.ok(counter, 'paper-input-char-counter exists'); @@ -93,8 +92,8 @@ test('character counter counts new lines in textareas correctly', function() { var input = fixture('textarea'); input.value = 'foo\nbar'; - forceXIfStamp(input); + debugger var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter') assert.ok(counter, 'paper-input-char-counter exists'); diff --git a/test/paper-input-container.html b/test/paper-input-container.html index caa3a3ee..b3e2cb5f 100644 --- a/test/paper-input-container.html +++ b/test/paper-input-container.html @@ -32,8 +32,8 @@ @@ -42,8 +42,10 @@ @@ -52,8 +54,10 @@ @@ -61,8 +65,8 @@ @@ -70,8 +74,8 @@ @@ -79,8 +83,8 @@ @@ -88,8 +92,10 @@ @@ -97,8 +103,10 @@ @@ -108,8 +116,10 @@ @@ -117,8 +127,10 @@ diff --git a/test/paper-input-error.html b/test/paper-input-error.html index 9337a95e..e9006544 100644 --- a/test/paper-input-error.html +++ b/test/paper-input-error.html @@ -28,15 +28,19 @@ - + + + error diff --git a/test/paper-input.html b/test/paper-input.html index c40ea6a1..392b2467 100644 --- a/test/paper-input.html +++ b/test/paper-input.html @@ -143,43 +143,43 @@ } suite('basic', function() { - // test('setting value sets the input value', function() { - // var input = fixture('basic'); - // input.value = 'foobar'; - // assert.equal(getIronInput(input).value, input.value, 'iron-input value equals input.value'); - // assert.equal(getNativeInput(input).value, input.value, 'iron-getNativeInput(input) value equals input.value'); - // }); - // - // test('placeholder does not overlap label', function() { - // var input = fixture('placeholder'); - // assert.equal(getNativeInput(input).placeholder, input.placeholder, 'inputElement.placeholder equals input.placeholder'); - // assert.equal(input.noLabelFloat, false); - // assert.ok(getFloatingLabel(input)); - // }); - // - // test('special types autofloat the label', function() { - // var input = fixture('date'); - // // Browsers that don't support special types like `date` fallback - // // to `text`, so make sure to only test if type is still preserved after - // // the element is attached. - // if (getNativeInput(input).type === "date") { - // assert.equal(input.alwaysFloatLabel, true); - // assert.ok(getFloatingLabel(input)); - // } - // }); - // - // test('always-float-label attribute works without placeholder', function() { - // var input = fixture('always-float-label'); - // var container = Polymer.dom(input.root).querySelector('paper-input-container'); - // var inputContent = Polymer.dom(container.root).querySelector('.input-content'); - // assert.isTrue(inputContent.classList.contains('label-is-floating'), 'label is floating'); - // }); - // - // test('label does not receive pointer events', function() { - // var input = fixture('always-float-label'); - // var label = Polymer.dom(input.root).querySelector('label'); - // assert.equal(getComputedStyle(label).pointerEvents, 'none'); - // }); + test('setting value sets the input value', function() { + var input = fixture('basic'); + input.value = 'foobar'; + assert.equal(getIronInput(input).value, input.value, 'iron-input value equals input.value'); + assert.equal(getNativeInput(input).value, input.value, 'iron-getNativeInput(input) value equals input.value'); + }); + + test('placeholder does not overlap label', function() { + var input = fixture('placeholder'); + assert.equal(getNativeInput(input).placeholder, input.placeholder, 'inputElement.placeholder equals input.placeholder'); + assert.equal(input.noLabelFloat, false); + assert.ok(getFloatingLabel(input)); + }); + + test('special types autofloat the label', function() { + var input = fixture('date'); + // Browsers that don't support special types like `date` fallback + // to `text`, so make sure to only test if type is still preserved after + // the element is attached. + if (getNativeInput(input).type === "date") { + assert.equal(input.alwaysFloatLabel, true); + assert.ok(getFloatingLabel(input)); + } + }); + + test('always-float-label attribute works without placeholder', function() { + var input = fixture('always-float-label'); + var container = Polymer.dom(input.root).querySelector('paper-input-container'); + var inputContent = Polymer.dom(container.root).querySelector('.input-content'); + assert.isTrue(inputContent.classList.contains('label-is-floating'), 'label is floating'); + }); + + test('label does not receive pointer events', function() { + var input = fixture('always-float-label'); + var label = Polymer.dom(input.root).querySelector('label'); + assert.equal(getComputedStyle(label).pointerEvents, 'none'); + }); test('error message is displayed', function() { var input = fixture('error'); @@ -187,224 +187,215 @@ assert.notEqual(getComputedStyle(error).visibility, 'hidden', 'error is not visibility:hidden'); }); - // test('empty required input shows error', function() { - // var input = fixture('required'); - // forceXIfStamp(input); - // var error = getErrorDiv(input); - // debugger - // assert.ok(error, 'paper-input-error exists'); - // assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none'); - // }); - // - // test('character counter is displayed', function() { - // var input = fixture('char-counter'); - // forceXIfStamp(input); - // var counter = getCharCounterDiv(input) - // assert.ok(counter, 'paper-input-char-counter exists'); - // assert.equal(counter._charCounterStr, input.value.length, 'character counter shows the value length'); - // }); - // - // test('character counter is correct for type=number', function() { - // var input = fixture('type-number-char-counter'); - // forceXIfStamp(input); - // var counter = getCharCounterDiv(input) - // assert.ok(counter, 'paper-input-char-counter exists'); - // assert.equal(counter._charCounterStr, input.value.toString().length, 'character counter shows the value length'); - // }); - // - // test('validator is used', function() { - // var input = fixture('validator'); - // assert.ok(getNativeInput(input).invalid, 'input is invalid'); - // }); - // - // test('caret position is preserved', function() { - // var input = fixture('basic'); - // var ironInput = Polymer.dom(input.root).querySelector('input[is="iron-input"]'); - // input.value = 'nananana'; - // ironInput.selectionStart = 2; - // ironInput.selectionEnd = 2; - // - // input.updateValueAndPreserveCaret('nanananabatman'); - // - // assert.equal(ironInput.selectionStart, 2, 'selectionStart is preserved'); - // assert.equal(ironInput.selectionEnd, 2, 'selectionEnd is preserved'); - // }); - // - // test('setting autofocus to true implictly acquires focus', function(done) { - // var input = fixture('basic'); - // var inputFocusSpy = sinon.spy(getNativeInput(input), 'focus'); - // window.setTimeout(function() { - // assert(inputFocusSpy.called); - // done(); - // }, 50); - // input.autofocus = true; - // }); - // - // test('autofocus doesn\'t grab focus if another element already has it', function(done) { - // var inputs = fixture('multiple-inputs'); - // var inputFocusSpies = inputs.map(function(input) { - // return sinon.spy(getNativeInput(input), 'focus'); - // }); - // window.setTimeout(function() { - // assert(inputFocusSpies[0].called, 'first autofocus input with grabbed focus'); - // assert(!inputFocusSpies[1].called, 'second autofocus input let first input keep focus'); - // done(); - // }, 50); - // inputs[0].autofocus = true; - // inputs[1].autofocus = true; // Shouldn't cause focus to change - // }); - // - // }); - // - // suite('focus/blur events', function() { - // var input; - // - // setup(function() { - // input = fixture('basic'); - // }); - // - // // At the moment, it is very hard to correctly fire exactly - // // one focus/blur events on a paper-input. This is because - // // when a paper-input is focused, it needs to focus - // // its underlying native input, which will also fire a `blur` - // // event. - // test('focus events fired on host element', function() { - // input.addEventListener('focus', function(event) { - // assert(input.focused, 'input is focused'); - // }); - // MockInteractions.focus(input); - // }); - // - // test('focus events fired on host element if nested element is focused', function() { - // input.addEventListener('focus', function(event) { - // assert(input.focused, 'input is focused'); - // }); - // MockInteractions.focus(getNativeInput(input)); - // }); - // - // test('blur events fired on host element', function() { - // MockInteractions.focus(input); - // input.addEventListener('blur', function(event) { - // assert(!input.focused, 'input is blurred'); - // }); - // MockInteractions.blur(input); - // }); - // - // test('blur events fired on host element nested element is blurred', function() { - // MockInteractions.focus(input); - // input.addEventListener('blur', function(event) { - // assert(!input.focused, 'input is blurred'); - // }); - // MockInteractions.blur(getNativeInput(input)); - // }); - // - // test('focusing then bluring sets the focused attribute correctly', function() { - // MockInteractions.focus(input); - // assert(input.focused, 'input is focused'); - // MockInteractions.blur(input); - // assert(!input.focused, 'input is blurred'); - // MockInteractions.focus(getNativeInput(input)); - // assert(input.focused, 'input is focused'); - // MockInteractions.blur(getNativeInput(input)); - // assert(!input.focused, 'input is blurred'); - // }); - // - // test('focusing then bluring with shift-tab removes the focused attribute correctly', function() { - // MockInteractions.focus(input); - // assert(input.focused, 'input is focused'); - // - // // Fake a shift-tab induced blur by forcing the flag. - // input._shiftTabPressed = true; - // MockInteractions.blur(getNativeInput(input)); - // assert(!input.focused, 'input is blurred'); - // }); - // }); - // - // suite('focused styling (integration test)', function() { - // - // test('underline is colored when input is focused', function(done) { - // var input = fixture('basic'); - // var container = Polymer.dom(input.root).querySelector('paper-input-container'); - // var line = Polymer.dom(container.root).querySelector('.underline'); - // assert.isFalse(line.classList.contains('is-highlighted'), 'line is not highlighted when input is not focused'); - // MockInteractions.focus(getNativeInput(input)); - // requestAnimationFrame(function() { - // assert.isTrue(line.classList.contains('is-highlighted'), 'line is highlighted when input is focused'); - // done(); - // }); - // }); - // - // }); - // - // suite('validation', function() { - // - // test('invalid attribute updated after calling validate()', function() { - // var input = fixture('required-no-auto-validate'); - // forceXIfStamp(input); - // input.validate(); - // var error = getErrorDiv(input); - // assert.ok(error, 'paper-input-error exists'); - // assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none'); - // assert.isTrue(input.invalid, 'invalid is true'); - // }); - // - // }); - // - // suite('a11y', function() { - // test('has aria-labelledby, which is monotonically increasing', function() { - // var inputs = fixture('multiple-inputs'); - // - // // Find the first index of the input in this fixture. Since the label - // // ids monotonically increase every time a new input is created, and - // // this fixture isn't the first one in the document, we're going to start - // // at an ID > 1. - // var firstLabel = Polymer.dom(inputs[0].root).querySelector('label').id; - // var index = parseInt(firstLabel.substr(firstLabel.lastIndexOf('-') + 1)); - // - // for (var i = 0; i < inputs.length; i++ ) { - // var input = inputs[i].inputElement; - // var label = Polymer.dom(inputs[i].root).querySelector('label').id; - // - // assert.isTrue(input.hasAttribute('aria-labelledby')); - // assert.equal(label, 'paper-input-label-' + (index++)); - // assert.equal(input.getAttribute('aria-labelledby'), label); - // } - // }); - // - // test('has aria-describedby for error message', function() { - // var input = fixture('required'); - // forceXIfStamp(input); - // assert.isTrue(getNativeInput(input).hasAttribute('aria-describedby')); - // assert.equal(getNativeInput(input).getAttribute('aria-describedby'), getErrorDiv(input).id, 'aria-describedby points to the error message'); - // }); - // - // test('has aria-describedby for character counter', function() { - // var input = fixture('char-counter'); - // forceXIfStamp(input); - // assert.isTrue(getNativeInput(input).hasAttribute('aria-describedby')); - // assert.equal(getNativeInput(input).getAttribute('aria-describedby'), getCharCounterDiv(input).id, 'aria-describedby points to the character counter'); - // }); - // - // test('has aria-describedby for character counter and error', function() { - // var input = fixture('required-char-counter'); - // forceXIfStamp(input); - // assert.isTrue(getNativeInput(input).hasAttribute('aria-describedby')); - // assert.equal(getNativeInput(input).getAttribute('aria-describedby'), getErrorDiv(input).id + ' ' + getCharCounterDiv(input).id, 'aria-describedby points to the error message and character counter'); - // }); - // - // test('focus an input with tabindex', function(done) { - // var input = fixture('has-tabindex'); - // flush(function() { - // MockInteractions.focus(input); - // flush(function() { - // assert.equal(input.shadowRoot ? input.shadowRoot.activeElement : - // document.activeElement, input._focusableElement); - // done(); - // }); - // }); - // }); + test('character counter is displayed', function() { + var input = fixture('char-counter'); + forceXIfStamp(input); + var counter = getCharCounterDiv(input) + assert.ok(counter, 'paper-input-char-counter exists'); + assert.equal(counter._charCounterStr, input.value.length, 'character counter shows the value length'); + }); + + test('character counter is correct for type=number', function() { + var input = fixture('type-number-char-counter'); + forceXIfStamp(input); + var counter = getCharCounterDiv(input) + assert.ok(counter, 'paper-input-char-counter exists'); + assert.equal(counter._charCounterStr, input.value.toString().length, 'character counter shows the value length'); + }); + + test('validator is used', function() { + var input = fixture('validator'); + assert.ok(getNativeInput(input).invalid, 'input is invalid'); + }); + + test('caret position is preserved', function() { + var input = fixture('basic'); + var ironInput = getIronInput(input); + input.value = 'nananana'; + ironInput.selectionStart = 2; + ironInput.selectionEnd = 2; + + input.updateValueAndPreserveCaret('nanananabatman'); + + assert.equal(ironInput.selectionStart, 2, 'selectionStart is preserved'); + assert.equal(ironInput.selectionEnd, 2, 'selectionEnd is preserved'); + }); + + test('setting autofocus to true implictly acquires focus', function(done) { + var input = fixture('basic'); + var inputFocusSpy = sinon.spy(getIronInput(input), 'focus'); + window.setTimeout(function() { + assert(inputFocusSpy.called); + done(); + }, 50); + input.autofocus = true; + }); + + test('autofocus doesn\'t grab focus if another element already has it', function(done) { + var inputs = fixture('multiple-inputs'); + var inputFocusSpies = inputs.map(function(input) { + return sinon.spy(getIronInput(input), 'focus'); + }); + window.setTimeout(function() { + assert(inputFocusSpies[0].called, 'first autofocus input with grabbed focus'); + assert(!inputFocusSpies[1].called, 'second autofocus input let first input keep focus'); + done(); + }, 50); + inputs[0].autofocus = true; + inputs[1].autofocus = true; // Shouldn't cause focus to change + }); + + }); + + suite('focus/blur events', function() { + var input; + + setup(function() { + input = fixture('basic'); + }); + + // At the moment, it is very hard to correctly fire exactly + // one focus/blur events on a paper-input. This is because + // when a paper-input is focused, it needs to focus + // its underlying native input, which will also fire a `blur` + // event. + test('focus events fired on host element', function() { + input.addEventListener('focus', function(event) { + assert(input.focused, 'input is focused'); + }); + MockInteractions.focus(input); + }); + + test('focus events fired on host element if nested element is focused', function() { + input.addEventListener('focus', function(event) { + assert(input.focused, 'input is focused'); + }); + MockInteractions.focus(getNativeInput(input)); + }); + + test('blur events fired on host element', function() { + MockInteractions.focus(input); + input.addEventListener('blur', function(event) { + assert(!input.focused, 'input is blurred'); + }); + MockInteractions.blur(input); + }); + + test('blur events fired on host element nested element is blurred', function() { + MockInteractions.focus(input); + input.addEventListener('blur', function(event) { + assert(!input.focused, 'input is blurred'); + }); + MockInteractions.blur(getNativeInput(input)); + }); + + test('focusing then bluring sets the focused attribute correctly', function() { + MockInteractions.focus(input); + assert(input.focused, 'input is focused'); + MockInteractions.blur(input); + assert(!input.focused, 'input is blurred'); + MockInteractions.focus(getNativeInput(input)); + assert(input.focused, 'input is focused'); + MockInteractions.blur(getNativeInput(input)); + assert(!input.focused, 'input is blurred'); + }); + + test('focusing then bluring with shift-tab removes the focused attribute correctly', function() { + MockInteractions.focus(input); + assert(input.focused, 'input is focused'); + + // Fake a shift-tab induced blur by forcing the flag. + input._shiftTabPressed = true; + MockInteractions.blur(getNativeInput(input)); + assert(!input.focused, 'input is blurred'); + }); + }); + + suite('focused styling (integration test)', function() { + + test('underline is colored when input is focused', function(done) { + var input = fixture('basic'); + var container = Polymer.dom(input.root).querySelector('paper-input-container'); + var line = Polymer.dom(container.root).querySelector('.underline'); + assert.isFalse(line.classList.contains('is-highlighted'), 'line is not highlighted when input is not focused'); + MockInteractions.focus(getNativeInput(input)); + requestAnimationFrame(function() { + assert.isTrue(line.classList.contains('is-highlighted'), 'line is highlighted when input is focused'); + done(); + }); + }); + + }); + + suite('validation', function() { + + test('invalid attribute updated after calling validate()', function() { + var input = fixture('required-no-auto-validate'); + forceXIfStamp(input); + input.validate(); + var error = getErrorDiv(input); + assert.ok(error, 'paper-input-error exists'); + assert.notEqual(getComputedStyle(error).visibility, 'hidden', 'error is not visibility:hidden'); + assert.isTrue(input.invalid, 'invalid is true'); + }); + + }); + + suite('a11y', function() { + test('has aria-labelledby, which is monotonically increasing', function() { + var inputs = fixture('multiple-inputs'); + + // Find the first index of the input in this fixture. Since the label + // ids monotonically increase every time a new input is created, and + // this fixture isn't the first one in the document, we're going to start + // at an ID > 1. + var firstLabel = Polymer.dom(inputs[0].root).querySelector('label').id; + var index = parseInt(firstLabel.substr(firstLabel.lastIndexOf('-') + 1)); + + for (var i = 0; i < inputs.length; i++ ) { + var input = inputs[i].inputElement; + var label = Polymer.dom(inputs[i].root).querySelector('label').id; + + assert.isTrue(input.hasAttribute('aria-labelledby')); + assert.equal(label, 'paper-input-label-' + (index++)); + assert.equal(input.getAttribute('aria-labelledby'), label); + } + }); + + test('has aria-describedby for error message', function() { + var input = fixture('required'); + forceXIfStamp(input); + assert.isTrue(getNativeInput(input).hasAttribute('aria-describedby')); + assert.equal(getNativeInput(input).getAttribute('aria-describedby'), getErrorDiv(input).id, 'aria-describedby points to the error message'); + }); + + test('has aria-describedby for character counter', function() { + var input = fixture('char-counter'); + forceXIfStamp(input); + assert.isTrue(getNativeInput(input).hasAttribute('aria-describedby')); + assert.equal(getNativeInput(input).getAttribute('aria-describedby'), getCharCounterDiv(input).id, 'aria-describedby points to the character counter'); + }); + + test('has aria-describedby for character counter and error', function() { + var input = fixture('required-char-counter'); + forceXIfStamp(input); + assert.isTrue(getNativeInput(input).hasAttribute('aria-describedby')); + assert.equal(getNativeInput(input).getAttribute('aria-describedby'), getErrorDiv(input).id + ' ' + getCharCounterDiv(input).id, 'aria-describedby points to the error message and character counter'); + }); + + test('focus an input with tabindex', function(done) { + var input = fixture('has-tabindex'); + MockInteractions.focus(input); + assert.equal(input.shadowRoot ? input.shadowRoot.activeElement : + document.activeElement, input._focusableElement); + done(); + }); }); + a11ySuite('basic'); + a11ySuite('label'); + a11ySuite('label-has-value'); + a11ySuite('error'); From eeae39b1e0809ceecd578fca0fc09d7080c8b94e Mon Sep 17 00:00:00 2001 From: Monica Dinculescu Date: Mon, 10 Oct 2016 11:23:17 -0700 Subject: [PATCH 04/52] fix remaining tests --- demo/index.html | 5 +- paper-input.html | 13 ++++- paper-textarea.html | 15 +++++- test/paper-input-char-counter.html | 29 +++++----- test/paper-input-error.html | 10 +++- test/paper-input.html | 85 +++++++++++++++++++----------- test/paper-textarea.html | 51 +++++++++++------- 7 files changed, 139 insertions(+), 69 deletions(-) diff --git a/demo/index.html b/demo/index.html index b46d8938..57ac560c 100644 --- a/demo/index.html +++ b/demo/index.html @@ -76,7 +76,7 @@

Inputs can have different types, and be disabled

diff --git a/paper-textarea.html b/paper-textarea.html index 75a2c74f..b0027dc8 100644 --- a/paper-textarea.html +++ b/paper-textarea.html @@ -57,6 +57,8 @@ - - + + + + + + + diff --git a/test/paper-input-char-counter.html b/test/paper-input-char-counter.html index d3c7b327..fefef082 100644 --- a/test/paper-input-char-counter.html +++ b/test/paper-input-char-counter.html @@ -73,31 +73,36 @@ assert.equal(counter._charCounterStr, input.value.length, 'character counter shows input value length'); }); - test('character counter shows the value length with maxlength', function() { + test('character counter shows the value length with maxlength', function(done) { var container = fixture('counter-with-max'); var input = Polymer.dom(container).querySelector('#i'); var counter = Polymer.dom(container).querySelector('#c'); assert.equal(counter._charCounterStr, input.value.length + '/' + input.maxLength, 'character counter shows input value length and maxLength'); }); - test('character counter shows the value length with maxlength', function() { + test('character counter shows the value length with maxlength', function(done) { var input = fixture('textarea-with-max'); - var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter'); - assert.ok(counter, 'paper-input-char-counter exists'); - - assert.equal(counter._charCounterStr, input.value.length + '/' + input.inputElement.textarea.getAttribute('maxlength'), 'character counter shows input value length and maxLength'); + // Need to wait a tick to stamp the char-counter. + Polymer.Base.async(function() { + var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter'); + assert.ok(counter, 'paper-input-char-counter exists'); + assert.equal(counter._charCounterStr, input.value.length + '/' + input.inputElement.textarea.getAttribute('maxlength'), 'character counter shows input value length and maxLength'); + done(); + }, 1); }); - test('character counter counts new lines in textareas correctly', function() { + test('character counter counts new lines in textareas correctly', function(done) { var input = fixture('textarea'); input.value = 'foo\nbar'; - debugger - var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter') - assert.ok(counter, 'paper-input-char-counter exists'); - - assert.equal(counter._charCounterStr, input.value.length, 'character counter shows the value length'); + // Need to wait a tick to stamp the char-counter. + Polymer.Base.async(function() { + var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter') + assert.ok(counter, 'paper-input-char-counter exists'); + assert.equal(counter._charCounterStr, input.value.length, 'character counter shows the value length'); + done(); + }, 1); }); }); diff --git a/test/paper-input-error.html b/test/paper-input-error.html index e9006544..c54e55da 100644 --- a/test/paper-input-error.html +++ b/test/paper-input-error.html @@ -50,13 +50,19 @@ suite('basic', function() { - test('error message only appears when input is invalid', function() { + test('error message only appears when input is invalid', function(done) { var container = fixture('auto-validate-numbers'); var input = Polymer.dom(container).querySelector('#i'); var error = Polymer.dom(container).querySelector('#e'); + assert.equal(getComputedStyle(error).visibility, 'hidden', 'error is visibility:hidden'); input.bindValue = 'foobar'; - assert.notEqual(getComputedStyle(error).visibility, 'hidden', 'error is not visibility:hidden'); + + // Need to wait a tick to stamp the error message. + Polymer.Base.async(function() { + assert.notEqual(getComputedStyle(error).visibility, 'hidden', 'error is not visibility:hidden'); + done(); + }, 1); }); test('error message add on is registered', function() { diff --git a/test/paper-input.html b/test/paper-input.html index 392b2467..7bbfe34f 100644 --- a/test/paper-input.html +++ b/test/paper-input.html @@ -187,25 +187,33 @@ assert.notEqual(getComputedStyle(error).visibility, 'hidden', 'error is not visibility:hidden'); }); - test('character counter is displayed', function() { + test('character counter is displayed', function(done) { var input = fixture('char-counter'); - forceXIfStamp(input); - var counter = getCharCounterDiv(input) - assert.ok(counter, 'paper-input-char-counter exists'); - assert.equal(counter._charCounterStr, input.value.length, 'character counter shows the value length'); + + // Need to wait a tick to stamp the char-counter. + Polymer.Base.async(function() { + var counter = getCharCounterDiv(input); + assert.ok(counter, 'paper-input-char-counter exists'); + assert.equal(counter._charCounterStr, input.value.length, 'character counter shows the value length'); + done(); + }, 1); }); - test('character counter is correct for type=number', function() { + test('character counter is correct for type=number', function(done) { var input = fixture('type-number-char-counter'); - forceXIfStamp(input); - var counter = getCharCounterDiv(input) - assert.ok(counter, 'paper-input-char-counter exists'); - assert.equal(counter._charCounterStr, input.value.toString().length, 'character counter shows the value length'); + + // Need to wait a tick to stamp the char-counter. + Polymer.Base.async(function() { + var counter = getCharCounterDiv(input) + assert.ok(counter, 'paper-input-char-counter exists'); + assert.equal(counter._charCounterStr, input.value.toString().length, 'character counter shows the value length'); + done(); + }, 1); }); test('validator is used', function() { var input = fixture('validator'); - assert.ok(getNativeInput(input).invalid, 'input is invalid'); + assert.ok(getIronInput(input).invalid, 'input is invalid'); }); test('caret position is preserved', function() { @@ -329,14 +337,18 @@ suite('validation', function() { - test('invalid attribute updated after calling validate()', function() { + test('invalid attribute updated after calling validate()', function(done) { var input = fixture('required-no-auto-validate'); - forceXIfStamp(input); input.validate(); - var error = getErrorDiv(input); - assert.ok(error, 'paper-input-error exists'); - assert.notEqual(getComputedStyle(error).visibility, 'hidden', 'error is not visibility:hidden'); - assert.isTrue(input.invalid, 'invalid is true'); + + // Need to wait a tick to stamp the error message. + Polymer.Base.async(function() { + var error = getErrorDiv(input); + assert.ok(error, 'paper-input-error exists'); + assert.notEqual(getComputedStyle(error).visibility, 'hidden', 'error is not visibility:hidden'); + assert.isTrue(input.invalid, 'invalid is true'); + done(); + }, 1); }); }); @@ -353,7 +365,7 @@ var index = parseInt(firstLabel.substr(firstLabel.lastIndexOf('-') + 1)); for (var i = 0; i < inputs.length; i++ ) { - var input = inputs[i].inputElement; + var input = getNativeInput(inputs[i]); var label = Polymer.dom(inputs[i].root).querySelector('label').id; assert.isTrue(input.hasAttribute('aria-labelledby')); @@ -362,25 +374,38 @@ } }); - test('has aria-describedby for error message', function() { + test('has aria-describedby for error message', function(done) { var input = fixture('required'); - forceXIfStamp(input); - assert.isTrue(getNativeInput(input).hasAttribute('aria-describedby')); - assert.equal(getNativeInput(input).getAttribute('aria-describedby'), getErrorDiv(input).id, 'aria-describedby points to the error message'); + + // Need to wait a tick to stamp the error message. + Polymer.Base.async(function() { + assert.isTrue(getNativeInput(input).hasAttribute('aria-describedby')); + assert.equal(getNativeInput(input).getAttribute('aria-describedby'), getErrorDiv(input).id, 'aria-describedby points to the error message'); + done(); + }, 1); }); - test('has aria-describedby for character counter', function() { + + test('has aria-describedby for character counter', function(done) { var input = fixture('char-counter'); - forceXIfStamp(input); - assert.isTrue(getNativeInput(input).hasAttribute('aria-describedby')); - assert.equal(getNativeInput(input).getAttribute('aria-describedby'), getCharCounterDiv(input).id, 'aria-describedby points to the character counter'); + + // Need to wait a tick to stamp the char-counter. + Polymer.Base.async(function() { + assert.isTrue(getNativeInput(input).hasAttribute('aria-describedby')); + assert.equal(getNativeInput(input).getAttribute('aria-describedby'), getCharCounterDiv(input).id, 'aria-describedby points to the character counter'); + done(); + }, 1); }); - test('has aria-describedby for character counter and error', function() { + test('has aria-describedby for character counter and error', function(done) { var input = fixture('required-char-counter'); - forceXIfStamp(input); - assert.isTrue(getNativeInput(input).hasAttribute('aria-describedby')); - assert.equal(getNativeInput(input).getAttribute('aria-describedby'), getErrorDiv(input).id + ' ' + getCharCounterDiv(input).id, 'aria-describedby points to the error message and character counter'); + + // Need to wait a tick to stamp the char-counter and error message. + Polymer.Base.async(function() { + assert.isTrue(getNativeInput(input).hasAttribute('aria-describedby')); + assert.equal(getNativeInput(input).getAttribute('aria-describedby'), getErrorDiv(input).id + ' ' + getCharCounterDiv(input).id, 'aria-describedby points to the error message and character counter'); + done(); + }, 1); }); test('focus an input with tabindex', function(done) { diff --git a/test/paper-textarea.html b/test/paper-textarea.html index f69e4ee7..d5206308 100644 --- a/test/paper-textarea.html +++ b/test/paper-textarea.html @@ -73,12 +73,16 @@ assert.equal(input.inputElement.bindValue, input.value, 'inputElement value equals input.value'); }); - test('empty required input shows error', function() { + test('empty required input shows error', function(done) { var input = fixture('required'); - forceXIfStamp(input); - var error = Polymer.dom(input.root).querySelector('paper-input-error'); - assert.ok(error, 'paper-input-error exists'); - assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none'); + + // Need to wait a tick to stamp the error message. + Polymer.Base.async(function() { + var error = Polymer.dom(input.root).querySelector('paper-input-error'); + assert.ok(error, 'paper-input-error exists'); + assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none'); + done(); + }, 1); }); test('caret position is preserved', function() { @@ -203,30 +207,39 @@ assert.equal(input.inputElement.textarea.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label'); }); - test('has aria-describedby for error message', function() { + test('has aria-describedby for error message', function(done) { var input = fixture('required'); - forceXIfStamp(input); - assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby')); - assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id, 'aria-describedby points to the error message'); + + // Need to wait a tick to stamp the error message. + Polymer.Base.async(function() { + assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby')); + assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id, 'aria-describedby points to the error message'); + done(); + }, 1); }); - test('has aria-describedby for character counter', function() { + test('has aria-describedby for character counter', function(done) { var input = fixture('char-counter'); - forceXIfStamp(input); - assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby')); - assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the character counter'); + + // Need to wait a tick to stamp the char-counter. + Polymer.Base.async(function() { + assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby')); + assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the character counter'); + done(); + }, 1); }); test('has aria-describedby for character counter and error', function() { var input = fixture('required-char-counter'); - forceXIfStamp(input); - assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby')); - assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id + ' ' + Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the error message and character counter'); - }); + // Need to wait a tick to stamp the char-counter and error message. + Polymer.Base.async(function() { + assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby')); + assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id + ' ' + Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the error message and character counter'); + done(); + }, 1); + }); }); - - From 7410d6403892d0d7b92617d76d98222b0e8dd721 Mon Sep 17 00:00:00 2001 From: Monica Dinculescu Date: Mon, 10 Oct 2016 11:42:39 -0700 Subject: [PATCH 05/52] cleanup --- demo/ssn-input.html | 2 +- paper-input-container.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/demo/ssn-input.html b/demo/ssn-input.html index 134ac195..0c4fd378 100644 --- a/demo/ssn-input.html +++ b/demo/ssn-input.html @@ -8,9 +8,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> - + + + + + diff --git a/paper-input-behavior.html b/paper-input-behavior.html index 340e8aea..082d1ab2 100644 --- a/paper-input-behavior.html +++ b/paper-input-behavior.html @@ -389,8 +389,23 @@ return this.inputElement; }, + created: function() { + // These types have some default placeholder text; overlapping + // the label on top of it looks terrible. Auto-float the label in this case. + this._typesThatHaveText = ["date", "datetime", "datetime-local", "month", + "time", "week", "file"]; + }, + attached: function() { this._updateAriaLabelledBy(); + + // In the 2.0 version of the element, this is handled in `onIronInputReady`, + // i.e. after the native input has finished distributing. In the 1.0 version, + // the input is in the shadow tree, so it's already available. + if (!Polymer.Element && this.inputElement && + this._typesThatHaveText.indexOf(this.inputElement.type) !== -1) { + this.alwaysFloatLabel = true; + } }, _appendStringWithSpace: function(str, more) { diff --git a/paper-input-char-counter.html b/paper-input-char-counter.html index 218428ef..05508fcc 100644 --- a/paper-input-char-counter.html +++ b/paper-input-char-counter.html @@ -17,7 +17,7 @@ shows the number of characters entered in the input and the max length if it is specified. - + diff --git a/paper-input-container.html b/paper-input-container.html index f94873de..fe67cf63 100644 --- a/paper-input-container.html +++ b/paper-input-container.html @@ -25,13 +25,14 @@ + // In Polymer 1.0, you would use `` instead ov the above. - You can style the nested however you want; if you want it to look like a - Material Design input, you can style it with the --paper-input-container-shared-input-style mixin. +You can style the nested however you want; if you want it to look like a +Material Design input, you can style it with the --paper-input-container-shared-input-style mixin. Do not wrap `` around elements that already include it, such as ``. -Doing so may cause events to bounce infintely between the container and its contained element. +Doing so may cause events to bounce infinitely between the container and its contained element. ### Listening for input changes @@ -78,6 +79,7 @@ + // In Polymer 1.0, you would use `` instead of the above. @@ -483,15 +485,15 @@ } this.addEventListener('focus', this._boundOnFocus, true); this.addEventListener('blur', this._boundOnBlur, true); + }, + attached: function() { if (this.attrForValue) { this._inputElement.addEventListener(this._valueChangedEvent, this._boundValueChanged); } else { this.addEventListener('input', this._onInput); } - }, - attached: function() { // Only validate when attached if the input already has a value. if (this._inputElementValue && this._inputElementValue != '') { this._handleValueAndAutoValidate(this._inputElement); diff --git a/paper-input-error.html b/paper-input-error.html index 6e89912c..63f2421e 100644 --- a/paper-input-error.html +++ b/paper-input-error.html @@ -18,8 +18,8 @@ displayed when the `` is `invalid`. - - Only numbers are allowed! + + Only numbers are allowed! ### Styling diff --git a/paper-input.html b/paper-input.html index e9e82115..e92cc2c3 100644 --- a/paper-input.html +++ b/paper-input.html @@ -9,6 +9,7 @@ --> + @@ -34,7 +35,7 @@
$
- + A `paper-input` can use the native `type=search` or `type=file` features. @@ -52,14 +53,13 @@ ### Focus To focus a paper-input, you can call the native `focus()` method as long as the -paper input has a tab index. +paper input has a tab index. Similarly, `blur()` will blur the element. ### Styling See `Polymer.PaperInputContainer` for a list of custom properties used to style this element. - @group Paper Elements @element paper-input @hero hero.svg @@ -134,42 +134,7 @@ - - - - + @@ -183,6 +148,87 @@ + + + + + + From d64ded25bebf0d92e69a054ef1708c364f161b7f Mon Sep 17 00:00:00 2001 From: Monica Dinculescu Date: Wed, 19 Apr 2017 16:15:02 -0700 Subject: [PATCH 45/52] focus tests are hard and sometimes webdriver gets in the way --- test/paper-input.html | 36 ++++++++++++++++++++++++++++-------- 1 file changed, 28 insertions(+), 8 deletions(-) diff --git a/test/paper-input.html b/test/paper-input.html index 06aedc99..88d9373f 100644 --- a/test/paper-input.html +++ b/test/paper-input.html @@ -143,6 +143,7 @@ function ensureDocumentHasFocus() { window.top && window.top.focus(); + window.focus(); } suite('basic', function() { @@ -297,6 +298,10 @@ // Mutation observer is async, so wait one tick. Polymer.Base.async(function() { ensureDocumentHasFocus(); + // If the document doesn't have focus, we can't test focus. + if (!window.top.document.hasFocus()) { + this.skip(); + } input.focus(); assert(input.focused, 'input is focused'); assert(inputFocusSpy.callCount > 0, 'focus event fired'); @@ -307,10 +312,13 @@ // TODO(notwaldorf): Re-enable this test when // https://github.com/webcomponents/shadydom/issues/124 is fixed. // test('focus events fired on host element if nested element is focused', function(done) { + // ensureDocumentHasFocus(); + // // If the document doesn't have focus, we can't test focus. + // if (!window.top.document.hasFocus()) { + // this.skip(); + // } // // Mutation observer is async, so wait one tick. // Polymer.Base.async(function() { - // ensureDocumentHasFocus(); - // console.log('before focusin'); // getNativeInput(input).focus(); // assert(input.focused, 'input is focused'); // assert(inputFocusSpy.callCount > 0, 'focus event fired'); @@ -321,9 +329,14 @@ // TODO(notwaldorf): Re-enable this test when // https://github.com/webcomponents/shadydom/issues/126 is fixed. // test('blur events fired on host element', function(done) { + // ensureDocumentHasFocus(); + // // If the document doesn't have focus, we can't test focus. + // if (!window.top.document.hasFocus()) { + // this.skip(); + // } + // // // Mutation observer is async, so wait one tick. // Polymer.Base.async(function() { - // ensureDocumentHasFocus(); // input.focus(); // assert(input.focused, 'input is focused'); // assert(inputFocusSpy.callCount > 0, 'focus event fired'); @@ -332,8 +345,6 @@ // // We can't call blur() on the paper-input, because in shady dom // // it's not actually the element that's focused (the nested ) // // is. So, next best thing, blur the thing that's focused. - // console.log('about to blur, had ', blursBecauseOfFocus); - // console.log(document.activeElement); // document.activeElement.blur(); // input.blur(); // assert(blurFocusSpy.callCount > blursBecauseOfFocus, 'blur event fired'); @@ -396,11 +407,15 @@ suite('focused styling (integration test)', function(done) { test('underline is colored when input is focused', function(done) { + ensureDocumentHasFocus(); + // If the document doesn't have focus, we can't test focus. + if (!window.top.document.hasFocus()) { + this.skip(); + } + var input = fixture('basic'); // Mutation observer is async, so wait one tick. Polymer.Base.async(function() { - ensureDocumentHasFocus(); - var container = Polymer.dom(input.root).querySelector('paper-input-container'); var line = Polymer.dom(container.root).querySelector('.underline'); assert.isFalse(line.classList.contains('is-highlighted'), 'line is not highlighted when input is not focused'); @@ -499,11 +514,16 @@ }); test('focus an input with tabindex', function(done) { + ensureDocumentHasFocus(); + // If the document doesn't have focus, we can't test focus. + if (!window.top.document.hasFocus()) { + this.skip(); + } + var input = fixture('has-tabindex'); // Mutation observer is async, so wait one tick. Polymer.Base.async(function() { - ensureDocumentHasFocus(); input.focus(); assert.equal(input.shadowRoot ? input.shadowRoot.activeElement : document.activeElement, input._focusableElement); From 3b8b34e49027fd9aaa446ff618022e03b04c7717 Mon Sep 17 00:00:00 2001 From: Monica Dinculescu Date: Wed, 19 Apr 2017 17:37:15 -0700 Subject: [PATCH 46/52] fix some stray @applys --- paper-input-container.html | 4 ++-- paper-input.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/paper-input-container.html b/paper-input-container.html index 5f55c020..5c58125f 100644 --- a/paper-input-container.html +++ b/paper-input-container.html @@ -304,14 +304,14 @@ .input-content.focused ::slotted(textarea), .input-content.focused ::slotted(iron-autogrow-textarea), .input-content.focused ::slotted(.paper-input-input) { - @apply(--paper-input-container-input-focus); + @apply --paper-input-container-input-focus; } .input-content.is-invalid ::slotted(input), .input-content.is-invalid ::slotted(textarea), .input-content.is-invalid ::slotted(iron-autogrow-textarea), .input-content.is-invalid ::slotted(.paper-input-input) { - @apply(--paper-input-container-input-invalid); + @apply --paper-input-container-input-invalid; } .prefix ::slotted(*) { diff --git a/paper-input.html b/paper-input.html index 5c927756..854d09f1 100644 --- a/paper-input.html +++ b/paper-input.html @@ -124,7 +124,7 @@ } input::-ms-clear { - @apply(--paper-input-container-ms-clear); + @apply --paper-input-container-ms-clear; } input:-ms-input-placeholder { From 19c4d37f2a938bc36c71a1013a0c718dc6aa2e25 Mon Sep 17 00:00:00 2001 From: Monica Dinculescu Date: Thu, 20 Apr 2017 15:37:07 -0700 Subject: [PATCH 47/52] fix the case when we're using iron-input#2.x but Polymer 1 --- paper-input.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/paper-input.html b/paper-input.html index 5c927756..9a670fab 100644 --- a/paper-input.html +++ b/paper-input.html @@ -254,8 +254,14 @@ ], beforeRegister: function() { + // We need to tell which kind of of template to stamp based on + // what kind of `iron-input` we got, but because of polyfills and + // custom elements differences between v0 and v1, the safest bet is + // to check a particular method we know the iron-input#2.x can have. + // If it doesn't have it, then it's an iron-input#1.x. + var ironInput = document.createElement('iron-input'); + var version = typeof ironInput._initSlottedInput == 'function' ? 'v1' : 'v0'; var template = Polymer.DomModule.import('paper-input', 'template'); - var version = Polymer.Element ? 'v1' : 'v0'; var inputTemplate = Polymer.DomModule.import('paper-input', 'template#' + version); var inputPlaceholder = template.content.querySelector('#template-placeholder'); inputPlaceholder.parentNode.replaceChild(inputTemplate.content, inputPlaceholder); From 18b9cc8c4f2df51e8c534ca27efe59b6e26cc835 Mon Sep 17 00:00:00 2001 From: Monica Dinculescu Date: Mon, 24 Apr 2017 10:50:02 -0700 Subject: [PATCH 48/52] Update bower.json --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 4ab3c1e7..5c82429c 100644 --- a/bower.json +++ b/bower.json @@ -28,7 +28,7 @@ "homepage": "https://github.com/PolymerElements/paper-input", "ignore": [], "dependencies": { - "polymer": "Polymer/polymer#^2.0.0-rc.1", + "polymer": "Polymer/polymer#^2.0.0-rc.7", "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#2.0-preview", "iron-behaviors": "PolymerElements/iron-behaviors#2.0-preview", "iron-input": "PolymerElements/iron-input#2.0-preview", From 5600e71385ccd80a5f59b4380802d564c5310e02 Mon Sep 17 00:00:00 2001 From: Monica Dinculescu Date: Mon, 24 Apr 2017 14:30:23 -0700 Subject: [PATCH 49/52] how did these invalid selectors work before is a mystery --- test/paper-input-container.html | 52 ++++++++++++++++----------------- test/paper-input-error.html | 8 ++--- 2 files changed, 30 insertions(+), 30 deletions(-) diff --git a/test/paper-input-container.html b/test/paper-input-container.html index a566791c..cdf19f89 100644 --- a/test/paper-input-container.html +++ b/test/paper-input-container.html @@ -38,7 +38,7 @@ - + - + - + - + - + - + - + - + - + - +