From a2f0390ac8856d439eafdf4e6834a110e3c5cb08 Mon Sep 17 00:00:00 2001
From: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Tue, 4 Jan 2022 11:00:05 +0800
Subject: [PATCH] Skip opening the dropdown if the click event is from the
 error message (https://github.com/woocommerce/woocommerce-admin/pull/8094)

* Skip focusing the dropdown if the click event is from the error message

fix woocommerce/woocommerce-admin#7906

Update conmments

* Add changelogs
---
 .../fix-7906-click-error-message-open-select-control   |  4 ++++
 .../woocommerce-admin/packages/components/CHANGELOG.md |  1 +
 .../packages/components/src/select-control/control.js  | 10 ++++++++--
 3 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 plugins/woocommerce-admin/changelogs/fix-7906-click-error-message-open-select-control

diff --git a/plugins/woocommerce-admin/changelogs/fix-7906-click-error-message-open-select-control b/plugins/woocommerce-admin/changelogs/fix-7906-click-error-message-open-select-control
new file mode 100644
index 00000000000..7b5d5593940
--- /dev/null
+++ b/plugins/woocommerce-admin/changelogs/fix-7906-click-error-message-open-select-control
@@ -0,0 +1,4 @@
+Significance: patch
+Type: Fix
+
+Fix clicking the error message opens the dropdown. #8094
diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md
index cac05dc29fc..f82882d467b 100644
--- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md
+++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 -   Fix usage of Wordpress DatePicker component in `DatePicker`. #7982
 -   Fix select-control component label/value alignment. #8045
+-   Fix clicking the error message opens the dropdown. #8094
 
 # 8.1.1
 
diff --git a/plugins/woocommerce-admin/packages/components/src/select-control/control.js b/plugins/woocommerce-admin/packages/components/src/select-control/control.js
index 6111a593203..98c67d016c3 100644
--- a/plugins/woocommerce-admin/packages/components/src/select-control/control.js
+++ b/plugins/woocommerce-admin/packages/components/src/select-control/control.js
@@ -217,8 +217,14 @@ class Control extends Component {
 						'is-disabled': disabled,
 					}
 				) }
-				onClick={ () => {
-					this.input.current.focus();
+				onClick={ ( event ) => {
+					// Don't focus the input if the click event is from the error message.
+					if (
+						event.target.className !==
+						'components-base-control__help'
+					) {
+						this.input.current.focus();
+					}
 				} }
 			>
 				{ isSearchable && (