From 81ba47ba1cc4063a8f5326eb294346c04caffe2f Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Mon, 7 Feb 2022 12:46:57 +0100
Subject: [PATCH] fix: do not open dropdown on helper click (#3402) (#3404)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
---
 packages/combo-box/src/vaadin-combo-box-mixin.js  | 14 ++++++++++++--
 packages/combo-box/src/vaadin-combo-box.js        | 13 +++++++++++++
 packages/combo-box/test/toggling-dropdown.test.js | 13 +++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/combo-box/src/vaadin-combo-box-mixin.js b/packages/combo-box/src/vaadin-combo-box-mixin.js
index a55200f2cb..58e625cf4a 100644
--- 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
index 9cd58b994a..1105d0de16 100644
--- 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
index f135fe0840..ba672720a4 100644
--- 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();