fix: clear button should not open dropdown (#807)

Fixes #805.

bower.json

@@ -38,7 +38,7 @@
     "polymer": "^2.0.0",
     "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.1.1",
     "vaadin-overlay": "vaadin/vaadin-overlay#^3.2.0",
-    "vaadin-text-field": "vaadin/vaadin-text-field#^2.3.0",
+    "vaadin-text-field": "vaadin/vaadin-text-field#^2.4.3",
     "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.3.2",
     "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.1.1",
     "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.1.2",

src/vaadin-combo-box-light.html

@@ -154,9 +154,9 @@
       }
 
       __inputValueCommitted(e) {
-        // Detect if the input was cleared (e.g. by clicking the clear button on a vaadin-text-field)
+        // Detect if the input was cleared (by clicking the clear button on a vaadin-text-field)
         // and propagate the value change to combo box value immediately.
-        if (this._inputElementValue === '') {
+        if (e.__fromClearButton) {
           this._clear();
         }
       }

src/vaadin-combo-box-mixin.html

@@ -354,7 +354,8 @@
       this._closeOnBlurIsPrevented = true;
 
       const path = e.composedPath();
-      if (path.indexOf(this._clearElement) !== -1) {
+      const isClearElement = (path.indexOf(this._clearElement) !== -1) || (path[0].getAttribute('part') === 'clear-button');
+      if (isClearElement) {
         this._clear();
         this.focus();
       } else if (path.indexOf(this.inputElement) !== -1) {
@@ -615,12 +616,12 @@
       // Handle only input events from our inputElement.
       if (e.composedPath().indexOf(this.inputElement) !== -1) {
         this._inputElementValue = this.inputElement[this._propertyForValue];
-        this._filterFromInput();
+        this._filterFromInput(e);
       }
     }
 
     _filterFromInput(e) {
-      if (!this.opened) {
+      if (!this.opened && !e.__fromClearButton) {
         this.open();
       }
 

test/selecting-items.html

@@ -313,6 +313,12 @@
       expect(combobox.opened).to.eql(true);
     });
 
+    it('should not open the dropdown after clearing a selection', () => {
+      fire('click', clearIcon);
+
+      expect(combobox.opened).to.eql(false);
+    });
+
     it('should cancel click event to avoid input blur', () => {
       combobox.open();
 

test/vaadin-combo-box-light.html

@@ -345,6 +345,12 @@
           expect(comboBox.opened).to.eql(true);
         });
 
+        it('should not open the dropdown after clearing a selection', () => {
+          fire('click', clearButton);
+
+          expect(comboBox.opened).to.eql(false);
+        });
+
         it('should cancel click event to avoid input blur', () => {
           comboBox.open();
 
@@ -409,12 +415,33 @@
         textField = comboBox.inputElement;
       });
 
-      it('should immediately clear value when using clear button of vaadin-text-field', () => {
-        textField.clearButtonVisible = true;
-        comboBox.value = 'bar';
-        textField.$.clearButton.click();
+      describe('clear-button-visible', () => {
+        let clearButton;
+
+        beforeEach(() => {
+          textField.clearButtonVisible = true;
+          clearButton = textField.$.clearButton;
+          comboBox.value = 'bar';
+        });
+
+        it('should immediately clear value when using clear button of vaadin-text-field', () => {
+          fire('click', clearButton);
+          expect(comboBox.value).not.to.be.ok;
+        });
+
+        it('should not close the dropdown after clearing a selection', () => {
+          comboBox.open();
+
+          fire('click', clearButton);
 
-        expect(comboBox.value).not.to.be.ok;
+          expect(comboBox.opened).to.eql(true);
+        });
+
+        it('should not open the dropdown after clearing a selection', () => {
+          fire('click', clearButton);
+
+          expect(comboBox.opened).to.eql(false);
+        });
       });
     });
   </script>