fix: clear filter when clicking matching value (#3688)

vaadin · Apr 18, 2022 · df76091 · df76091
1 parent 9b9fa8a
commit df76091
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-internal.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-internal.js
@@ -81,6 +81,20 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     this._toggleElement = this.querySelector('.toggle-button');
   }
 
+  /**
+   * Override method from `InputMixin`.
+   *
+   * @protected
+   * @override
+   */
+  clear() {
+    super.clear();
+
+    if (this.inputElement) {
+      this.inputElement.value = '';
+    }
+  }
+
   /** @protected */
   _isClearButton(event) {
     return (

diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js
@@ -452,6 +452,7 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
 
   /** @private */
   __clearFilter() {
+    this.filter = '';
     this.$.comboBox.clear();
   }
 

diff --git a/packages/multi-select-combo-box/test/basic.test.js b/packages/multi-select-combo-box/test/basic.test.js
@@ -383,6 +383,22 @@ describe('basic', () => {
       await sendKeys({ type: 'pear' });
       await sendKeys({ down: 'Enter' });
       expect(internal.value).to.equal('');
+      expect(inputElement.value).to.equal('');
+    });
+
+    it('should clear input element value after clicking matching value', async () => {
+      await sendKeys({ type: 'ora' });
+      const item = document.querySelector('vaadin-multi-select-combo-box-item');
+      item.click();
+      expect(internal.value).to.equal('');
+      expect(inputElement.value).to.equal('');
+    });
+
+    it('should clear filter property after clicking matching value', async () => {
+      await sendKeys({ type: 'ora' });
+      const item = document.querySelector('vaadin-multi-select-combo-box-item');
+      item.click();
+      expect(comboBox.filter).to.equal('');
     });
 
     it('should not add custom value to selectedItems automatically', async () => {