Merge 888767b into 6c4e6b2

src/vaadin-text-field-mixin.html

@@ -364,7 +364,22 @@
           return;
         }
       }
-      this.__userInput = true;
+
+      if (this.__inputFromClearButton) {
+        this.__inputFromClearButton = false;
+        // In this case when input event is triggered by clear button we need to skip
+        // setting "this.__userInput = true" because the clear button clears the value
+        // first triggering _valueChanged() before this input event. If we wouldn't
+        // skip this, then __userInput would be left true until the next _valueChanged()
+        // happens which would then prevent setting this.inputElement.value correctly
+        // leaving it out of sync with this.value.
+      } else {
+        // This is used to prevent setting this.inputElement.value in _valueChanged()
+        // when this input event was actually triggered by the user from the input
+        // element itself (thus the value there should be correct already).
+        // This flag is set back to false in _valueChanged().
+        this.__userInput = true;
+      }
       this.value = e.target.value;
     }
 
@@ -597,6 +612,7 @@
         // below to propagate normally.
         this.__preventInput = false;
       }
+      this.__inputFromClearButton = true;
       this.inputElement.dispatchEvent(new Event('input', {bubbles: true, composed: true}));
       this.inputElement.dispatchEvent(new Event('change', {bubbles: !this._slottedInput}));
     }

test/accessibility.html

@@ -161,10 +161,23 @@
           expect(textField.value).not.to.be.ok;
         });
 
+        it('should clear the value of native input on ESC if clear button is visible', function() {
+          textField.value = 'Foo';
+          textField.clearButtonVisible = true;
+          textField.dispatchEvent(escKeyDownEvent);
+          expect(textField.inputElement.value).to.equal('');
+        });
+
         it('should not clear the value on ESC if clear button is not visible', function() {
           textField.value = 'Foo';
           textField.dispatchEvent(escKeyDownEvent);
-          expect(textField.value).to.be.equal('Foo');
+          expect(textField.value).to.equal('Foo');
+        });
+
+        it('should not clear the value of native input on ESC if clear button is not visible', function() {
+          textField.value = 'Foo';
+          textField.dispatchEvent(escKeyDownEvent);
+          expect(textField.inputElement.value).to.equal('Foo');
         });
 
       });

test/text-field.html

@@ -175,6 +175,20 @@
             expect(getComputedStyle(textField.$.clearButton).getPropertyValue('display')).to.be.equal('none');
           });
 
+          it('should clear the value when clear button is clicked', function() {
+            textField.clearButtonVisible = true;
+            textField.value = 'Foo';
+            textField.$.clearButton.click();
+            expect(textField.value).not.to.be.ok;
+          });
+
+          it('should clear the native input value when clear button is clicked', function() {
+            textField.clearButtonVisible = true;
+            textField.value = 'Foo';
+            textField.$.clearButton.click();
+            expect(textField.inputElement.value).to.equal('');
+          });
+
           it('should dispatch input event when clear button is clicked', function() {
             const inputSpy = sinon.spy();
             textField.addEventListener('input', inputSpy);
@@ -199,7 +213,7 @@
             expect(event.defaultPrevented).to.be.true;
           });
 
-          it('should set _valueClearing flag not to dipatch change event on mousedown and remove it it on click', function() {
+          it('should set _valueClearing flag not to dispatch change event on mousedown and remove it on click', function() {
             // Testing internal implementation as it impossible to test native change event.
             // For case when the field is focused, value is changed, clear button is pressed.
             // Should not fire two change events.
@@ -218,6 +232,14 @@
             expect(changeSpy).to.be.calledOnce;
           });
 
+          it('should update input value when setting value after clicking clear button', function() {
+            textField.clearButtonVisible = true;
+            textField.value = 'Foo';
+            textField.$.clearButton.click();
+            textField.value = 'Bar';
+            expect(textField.inputElement.value).to.equal('Bar');
+          });
+
           ['disabled', 'readonly'].forEach(state => {
             it(`clear button should not be visible when field is ${state}`, function() {
               textField.clearButtonVisible = true;
@@ -439,6 +461,13 @@
           textField.clear();
           expect(textField.value).not.to.be.ok;
         });
+
+        it('should clear the value of native input when clear() is called', () => {
+          const textField = fixture(`default${fixtureName}`);
+          textField.value = 'Foo';
+          textField.clear();
+          expect(textField.inputElement.value).to.equal('');
+        });
       });
     });
   </script>