From 2aca25c4763b14d2af051403b5b940dcd23db9ab Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 27 Aug 2020 08:20:36 -0400
Subject: [PATCH] Toggle menu when clicking a tag

---
 src/components/select/select.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index 1e5421c11..f5181d753 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -121,6 +121,7 @@ export class Select {
     this.handleClear = this.handleClear.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleLabelClick = this.handleLabelClick.bind(this);
+    this.handleTagClick = this.handleTagClick.bind(this);
     this.handleMenuKeyDown = this.handleMenuKeyDown.bind(this);
     this.handleMenuHide = this.handleMenuHide.bind(this);
     this.handleMenuShow = this.handleMenuShow.bind(this);
@@ -232,6 +233,21 @@ export class Select {
     this.reportDuplicateItemValues();
   }
 
+  handleTagClick(event: MouseEvent) {
+    // Don't toggle the menu when a tag's clear button is activated
+    const path = event.composedPath() as Array<EventTarget>;
+    const clearButton = path.find(el => {
+      if (el instanceof HTMLElement) {
+        const element = el as HTMLElement;
+        return element.getAttribute('part') === 'clear-button';
+      }
+    });
+
+    if (clearButton) {
+      event.stopPropagation();
+    }
+  }
+
   reportDuplicateItemValues() {
     const items = this.getItems();
 
@@ -266,7 +282,7 @@ export class Select {
             size={this.size}
             pill={this.pill}
             clearable
-            onClick={event => event.stopPropagation()}
+            onClick={this.handleTagClick}
             onSlClear={event => {
               event.stopPropagation();
               item.checked = false;