fix: do not open dropdown on helper click (#3402) (#3404)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Feb 7, 2022 · 81ba47b · 81ba47b
1 parent 6a43be4
commit 81ba47b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git a/packages/combo-box/src/vaadin-combo-box-mixin.js b/packages/combo-box/src/vaadin-combo-box-mixin.js
@@ -413,6 +413,16 @@ export const ComboBoxMixin = (subclass) =>
       }
     }
 
+    /**
+     * @param {Event} event
+     * @protected
+     */
+    _onHostClick(_event) {
+      if (!this.autoOpenDisabled) {
+        this.open();
+      }
+    }
+
     /** @private */
     _onClick(e) {
       this._closeOnBlurIsPrevented = true;
@@ -427,8 +437,8 @@ export const ComboBoxMixin = (subclass) =>
         } else {
           this.open();
         }
-      } else if (!this.autoOpenDisabled) {
-        this.open();
+      } else {
+        this._onHostClick(e);
       }
 
       this._closeOnBlurIsPrevented = false;

diff --git a/packages/combo-box/src/vaadin-combo-box.js b/packages/combo-box/src/vaadin-combo-box.js
@@ -291,6 +291,19 @@ class ComboBox extends ComboBoxDataProviderMixin(
 
     this._handleClearButtonClick(event);
   }
+
+  /**
+   * @param {Event} event
+   * @protected
+   */
+  _onHostClick(event) {
+    const path = event.composedPath();
+
+    // Open dropdown only when clicking on the label or input field
+    if (path.includes(this._labelNode) || path.includes(this._positionTarget)) {
+      super._onHostClick(event);
+    }
+  }
 }
 
 customElements.define(ComboBox.is, ComboBox);

diff --git a/packages/combo-box/test/toggling-dropdown.test.js b/packages/combo-box/test/toggling-dropdown.test.js
@@ -74,6 +74,19 @@ describe('toggling dropdown', () => {
       expect(comboBox.opened).to.be.true;
     });
 
+    it('should not open the overlay on helper click', () => {
+      comboBox.helperText = 'Helper Text';
+      comboBox.querySelector('[slot=helper]').click();
+      expect(comboBox.opened).to.be.false;
+    });
+
+    it('should not open the overlay on error message click', () => {
+      comboBox.invalid = true;
+      comboBox.errorMessage = 'Error message';
+      comboBox.querySelector('[slot=error-message]').click();
+      expect(comboBox.opened).to.be.false;
+    });
+
     it('should open on function call', () => {
       comboBox.open();