Remove overlay when no items provided, add test

vaadin · Oct 29, 2020 · 0371c41 · 0371c41
1 parent 4763849
commit 0371c41
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/src/vaadin-combo-box-dropdown-wrapper.html b/src/vaadin-combo-box-dropdown-wrapper.html
@@ -247,10 +247,12 @@
             this._initDropdown();
           }
         }
-        // Do not attach if no items
-        // Do not dettach if opened but user types an invalid search
-        this.$.dropdown.opened = !!(opened && (loading ||
-                this.$.dropdown.opened || this._isNotEmpty(items)));
+
+        if (this._isEmpty(items)) {
+          this.$.dropdown.__emptyItems = true;
+        }
+        this.$.dropdown.opened = !!(opened && (loading || this._isNotEmpty(items)));
+        this.$.dropdown.__emptyItems = false;
       }
 
       _initDropdown() {

diff --git a/src/vaadin-combo-box-dropdown.html b/src/vaadin-combo-box-dropdown.html
@@ -193,7 +193,7 @@
           window.addEventListener('scroll', this._boundSetPosition, true);
           document.addEventListener('click', this._boundOutsideClickListener, true);
           this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-opened', {bubbles: true, composed: true}));
-        } else {
+        } else if (!this.__emptyItems) {
           window.removeEventListener('scroll', this._boundSetPosition, true);
           document.removeEventListener('click', this._boundOutsideClickListener, true);
           this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-closed', {bubbles: true, composed: true}));

diff --git a/test/toggling-dropdown.html b/test/toggling-dropdown.html
@@ -48,6 +48,11 @@
   describe('toggling the dropdown', () => {
     let combobox;
 
+    function setInputValue(value) {
+      combobox.inputElement.value = value;
+      combobox.inputElement.dispatchEvent(new CustomEvent('input'));
+    }
+
     function clickToggleIcon() {
       fireMousedownMouseupClick(combobox._toggleElement);
     }
@@ -300,6 +305,33 @@
         expect(combobox.opened).to.equal(false);
       });
 
+      describe('filtered items are empty', () => {
+        it('should close the dropdown on non-existent values', () => {
+          combobox.open();
+
+          // Existent value
+          setInputValue('1');
+          expect(combobox.$.overlay.$.dropdown.$.overlay.opened).to.be.true;
+          expect(combobox.opened).to.be.true;
+
+          // Non-existent value
+          setInputValue('3');
+          expect(combobox.$.overlay.$.dropdown.$.overlay.opened).to.be.false;
+          expect(combobox.opened).to.be.true;
+        });
+
+        it('should not commit value the input on dropdown closing', () => {
+          combobox.open();
+
+          setInputValue('3');
+          expect(combobox.inputElement.value).to.equal('3');
+          expect(combobox.value).to.be.empty;
+
+          fire('focusout', combobox.inputElement);
+          expect(combobox.inputElement.value).to.be.empty;
+        });
+      });
+
       // When using Shadow DOM polyfill, the style scope of the combobox might
       // not get added to the overlay after it's moved back to the combobox.
       // The following test ensures that the overlay doesn't keep the style