Merge pull request #625 from vaadin/fix/ffs-input-element

Fix validation for combo-box-light, use inputElement consistently

src/vaadin-combo-box-mixin.html

@@ -763,8 +763,8 @@
      * You can override the `checkValidity` method for custom validations.
      */
     checkValidity() {
-      if (this._bindableInput.validate) {
-        return this._bindableInput.validate();
+      if (this.inputElement.validate) {
+        return this.inputElement.validate();
       }
     }
 

src/vaadin-combo-box.html

@@ -285,7 +285,6 @@
         ready() {
           super.ready();
 
-          this._bindableInput = this.$.input;
           this._nativeInput = this.$.input.focusElement;
           this._toggleElement = this.$.toggleButton;
           this._clearElement = this.$.clearButton;

test/keyboard.html

@@ -36,21 +36,17 @@
 
     let comboBox;
 
-    function getInput() {
-      return comboBox.inputElement;
-    }
-
     function filter(value) {
-      comboBox._bindableInput.value = value;
-      getInput().dispatchEvent(new CustomEvent('input'));
+      comboBox.inputElement.value = value;
+      comboBox.inputElement.dispatchEvent(new CustomEvent('input'));
     }
 
     function getFocusedIndex() {
       return comboBox._focusedIndex;
     }
 
     function pushKey(key, cb) {
-      MockInteractions.pressAndReleaseKeyOn(getInput(), key);
+      MockInteractions.pressAndReleaseKeyOn(comboBox.inputElement, key);
       if (cb) {
         setTimeout(cb, 1);
       }
@@ -208,27 +204,27 @@
         comboBox.value = 'foobar';
         filter('bar');
         esc();
-        expect(getInput().value).to.eql('bar');
+        expect(comboBox.inputElement.value).to.eql('bar');
         esc();
-        expect(getInput().value).to.equal('foobar');
+        expect(comboBox.inputElement.value).to.equal('foobar');
       });
 
       it('should revert a non-listed value to the custom value after filtering', () => {
         comboBox.allowCustomValue = true;
         comboBox.value = 'foobar';
         filter('barbaz');
         esc();
-        expect(getInput().value).to.equal('foobar');
+        expect(comboBox.inputElement.value).to.equal('foobar');
       });
 
       it('should revert to the custom value after keyboar navigation', () => {
         comboBox.allowCustomValue = true;
         comboBox.value = 'foobar';
         arrowDown();
         esc();
-        expect(getInput().value).to.eql('foobar');
+        expect(comboBox.inputElement.value).to.eql('foobar');
         esc();
-        expect(getInput().value).to.equal('foobar');
+        expect(comboBox.inputElement.value).to.equal('foobar');
       });
 
       it('should close the overlay with enter', () => {
@@ -306,12 +302,12 @@
 
       it('should reset the input value synchronously when keyboard navigating', () => {
         arrowDown();
-        expect(getInput().value).to.eql('');
+        expect(comboBox.inputElement.value).to.eql('');
       });
 
       it('should prefill the input field when navigating down', done => {
         arrowDown(() => {
-          expect(getInput().value).to.eql('baz');
+          expect(comboBox.inputElement.value).to.eql('baz');
           done();
         });
       });
@@ -330,7 +326,7 @@
         arrowUp();
 
         setTimeout(() => {
-          expect(getInput().value).to.eql('foo');
+          expect(comboBox.inputElement.value).to.eql('foo');
           done();
         }, 1);
       });
@@ -341,7 +337,7 @@
         arrowDown();
 
         setTimeout(() => {
-          expect(getInput().value).to.eql('invalid filter');
+          expect(comboBox.inputElement.value).to.eql('invalid filter');
           done();
         }, 1);
       });
@@ -362,11 +358,11 @@
         arrowDown();
 
         setTimeout(() => {
-          expect(getInput().value).to.eql('bar');
+          expect(comboBox.inputElement.value).to.eql('bar');
 
           esc();
 
-          expect(getInput().value).to.eql('b');
+          expect(comboBox.inputElement.value).to.eql('b');
           done();
         }, 1);
       });
@@ -376,15 +372,15 @@
         arrowDown();
         esc();
 
-        expect(getInput().selectionStart).to.eql(getInput().selectionEnd);
+        expect(comboBox.inputElement.selectionStart).to.eql(comboBox.inputElement.selectionEnd);
       });
 
       it('should revert back to value if there is no filter', () => {
         arrowDown();
 
         esc();
 
-        expect(getInput().value).to.eql('bar');
+        expect(comboBox.inputElement.value).to.eql('bar');
       });
 
       it('should remove selection from the input value selecting value', done => {

test/selecting-items.html

@@ -106,7 +106,7 @@
 
       expect(combobox.selectedItem).to.equal('foo');
       expect(combobox.$.overlay._selectedItem).to.equal('foo');
-      expect(combobox._bindableInput.value).to.equal('foo');
+      expect(combobox.inputElement.value).to.equal('foo');
     });
 
     it('should close the dropdown on selection', () => {
@@ -304,12 +304,8 @@
   describe('selecting a custom value', () => {
     let combobox;
 
-    function getInput() {
-      return combobox._bindableInput;
-    }
-
     function filter(value) {
-      getInput().value = value;
+      combobox.inputElement.value = value;
       combobox.inputElement.dispatchEvent(new CustomEvent('input'));
     }
 

test/using-object-values.html

@@ -23,10 +23,6 @@
     describe('using object values', () => {
       let combobox;
 
-      function inputValue() {
-        return combobox._bindableInput.value;
-      }
-
       beforeEach(() => {
         combobox = fixture('combobox');
 
@@ -79,7 +75,7 @@
       it('should use the default label property on input field', () => {
         selectItem(0);
 
-        expect(inputValue()).to.eql('foo');
+        expect(combobox.inputElement.value).to.eql('foo');
       });
 
       it('should use the default label property in overlay items', done => {
@@ -95,7 +91,7 @@
 
         combobox.value = 'bar';
 
-        expect(inputValue()).to.eql('bazs');
+        expect(combobox.inputElement.value).to.eql('bazs');
       });
 
       it('should use the default value property', () => {
@@ -121,7 +117,7 @@
 
         selectItem(0);
 
-        expect(combobox._bindableInput.value).to.eql('default');
+        expect(combobox.inputElement.value).to.eql('default');
         expect(combobox.value).to.eql('default');
       });
 
@@ -131,15 +127,15 @@
 
         selectItem(0);
 
-        expect(combobox._bindableInput.value).to.eql('default');
+        expect(combobox.inputElement.value).to.eql('default');
         expect(combobox.value).to.eql('default');
       });
 
       it('should set the selected item when open', () => {
         combobox.value = 'bar';
 
         expect(combobox.selectedItem).to.eql(combobox.items[0]);
-        expect(combobox._bindableInput.value).to.eql('foo');
+        expect(combobox.inputElement.value).to.eql('foo');
       });
 
       it('should set the selected item when closed', () => {
@@ -148,52 +144,52 @@
         combobox.value = 'bar';
 
         expect(combobox.selectedItem).to.eql(combobox.items[0]);
-        expect(combobox._bindableInput.value).to.eql('foo');
+        expect(combobox.inputElement.value).to.eql('foo');
       });
 
       it('should set the value', () => {
         selectItem(0);
 
-        expect(combobox._bindableInput.value).to.eql('foo');
+        expect(combobox.inputElement.value).to.eql('foo');
         expect(combobox.value).to.eql('bar');
       });
 
       it('should set the value even if the value is zero (number)', () => {
         selectItem(2);
 
-        expect(combobox._bindableInput.value).to.eql('zero');
+        expect(combobox.inputElement.value).to.eql('zero');
         expect(combobox.value).to.eql(0);
       });
 
       it('should set the value even if the value is false (boolean)', () => {
         selectItem(3);
 
-        expect(combobox._bindableInput.value).to.eql('false');
+        expect(combobox.inputElement.value).to.eql('false');
         expect(combobox.value).to.eql(false);
       });
 
       it('should set the value even if the value is an empty string', () => {
         selectItem(4);
 
-        expect(combobox._bindableInput.value).to.eql('empty string');
+        expect(combobox.inputElement.value).to.eql('empty string');
         expect(combobox.value).to.eql('');
         expect(combobox.hasAttribute('has-value')).to.be.true;
       });
 
       it('should distinguish between 0 (number) and "0" (string) values', () => {
         selectItem(2);
-        expect(combobox._bindableInput.value).to.eql('zero');
+        expect(combobox.inputElement.value).to.eql('zero');
         expect(combobox.value).to.eql(0);
 
         selectItem(5);
-        expect(combobox._bindableInput.value).to.eql('zero as a string');
+        expect(combobox.inputElement.value).to.eql('zero as a string');
         expect(combobox.value).to.eql('0');
       });
 
       it('should set the input value from item label if item is found', () => {
         combobox.value = 'bar';
 
-        expect(combobox._bindableInput.value).to.eql('foo');
+        expect(combobox.inputElement.value).to.eql('foo');
       });
 
       it('should select first of duplicate values', () => {
@@ -210,7 +206,7 @@
 
         expect(combobox.selectedItem).to.eql(combobox.items[7]);
         expect(combobox.value).to.eql('duplicate');
-        expect(combobox._bindableInput.value).to.eql('duplicate value 2');
+        expect(combobox.inputElement.value).to.eql('duplicate value 2');
         expect(spy.callCount).to.eql(1);
       });
 
@@ -222,7 +218,7 @@
 
         expect(combobox.selectedItem).to.eql(combobox.items[9]);
         expect(combobox.value).to.eql(combobox.items[9].toString());
-        expect(combobox._bindableInput.value).to.eql('missing value 2');
+        expect(combobox.inputElement.value).to.eql('missing value 2');
         expect(spy.callCount).to.eql(1);
       });
 
@@ -235,7 +231,7 @@
 
           combobox.value = 'not found';
 
-          expect(combobox._bindableInput.value).to.empty;
+          expect(combobox.inputElement.value).to.empty;
         });
       });
 
@@ -246,7 +242,7 @@
         it('should set the value as bind value if item is not found', () => {
           combobox.value = 'not found';
 
-          expect(combobox._bindableInput.value).to.eql('not found');
+          expect(combobox.inputElement.value).to.eql('not found');
         });
       });
     });

test/vaadin-combo-box-light.html

@@ -98,6 +98,16 @@
         comboBox._toggleElement.dispatchEvent(e);
         expect(spy.called).to.be.true;
       });
+
+      it('should validate the paper-input element on checkValidity', () => {
+        const spy = sinon.spy(comboBox.inputElement, 'validate');
+
+        comboBox.required = true;
+        comboBox.value = 'foo';
+        comboBox.checkValidity();
+
+        expect(spy.called).to.be.true;
+      });
     });
   </script>
 

test/vaadin-combo-box.html

@@ -96,7 +96,7 @@
           comboBox.items = ['foo', 'bar'];
 
           expect(comboBox.selectedItem).to.eql('foo');
-          expect(comboBox._bindableInput.value).to.eql('foo');
+          expect(comboBox.inputElement.value).to.eql('foo');
         });
 
         it('should be able to be set before object items', () => {
@@ -106,7 +106,7 @@
           comboBox.items = [item];
 
           expect(comboBox.selectedItem).to.eql(item);
-          expect(comboBox._bindableInput.value).to.eql('foo');
+          expect(comboBox.inputElement.value).to.eql('foo');
         });
       });
 
@@ -135,7 +135,7 @@
         it('should set bind value after setting value property', () => {
           comboBox.value = 'foo';
 
-          expect(comboBox._bindableInput.value).to.eql('foo');
+          expect(comboBox.inputElement.value).to.eql('foo');
         });
 
         it('should set value after setting a custom input value', () => {
@@ -209,7 +209,7 @@
           comboBox.selectedItem = 'foo';
 
           expect(comboBox.value).to.eql('foo');
-          expect(comboBox._bindableInput.value).to.eql('foo');
+          expect(comboBox.inputElement.value).to.eql('foo');
         });
 
         it('should default back to null when value set to undefined', () => {