Merge ccd40a4 into 8722e4b

src/vaadin-text-field-mixin.html

@@ -571,6 +571,12 @@
       this.inputElement.focus();
       this.clear();
       this._valueClearing = false;
+      if (navigator.userAgent.match(/Trident/)) {
+        // Disable IE input" event prevention here, we want the input event from
+        // below to propagate normally.
+        this.__preventInput = false;
+      }
+      this.inputElement.dispatchEvent(new Event('input', {bubbles: true, composed: true}));
       this.inputElement.dispatchEvent(new Event('change', {bubbles: !this._slottedInput}));
     }
 
@@ -653,5 +659,12 @@
      *
      * @event change
      */
+
+    /**
+     * Fired when the value is changed by the user: on every typing keystroke,
+     * and the value is cleared using the clear button.
+     *
+     * @event input
+     */
   };
 </script>

test/text-field.html

@@ -175,6 +175,15 @@
             expect(getComputedStyle(textField.$.clearButton).getPropertyValue('display')).to.be.equal('none');
           });
 
+          it('should dispatch input event when clear button is clicked', function() {
+            const inputSpy = sinon.spy();
+            textField.addEventListener('input', inputSpy);
+            textField.clearButtonVisible = true;
+            textField.value = 'Foo';
+            textField.$.clearButton.click();
+            expect(inputSpy).to.be.calledOnce;
+          });
+
           it('should dispatch change event when clear button is clicked', function() {
             const changeSpy = sinon.spy();
             textField.addEventListener('change', changeSpy);
@@ -323,6 +332,17 @@
           input = textField.inputElement;
         });
 
+        it('should not stop native input events', () => {
+          const inputSpy = sinon.spy();
+          textField.addEventListener('input', inputSpy);
+
+          const inputEvent = new Event('input', {bubbles: true, composed: true});
+          input.dispatchEvent(inputEvent);
+
+          expect(inputSpy).to.be.calledOnce;
+          expect(inputSpy).to.be.calledWith(inputEvent);
+        });
+
         it('should dispatch change event on native input change', done => {
           const changeEvent = new Event('change');