Replace stopPropagation with target check

JedWatson · Mar 1, 2022 · 7fc125e · 7fc125e
1 parent d5d4c77
commit 7fc125e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/.changeset/allow-event-bubbling-for-all-controls.md b/.changeset/allow-event-bubbling-for-all-controls.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Replace stopPropagation with target check.
diff --git a/.changeset/share-click-handler-for-dropdown-and-select.md b/.changeset/share-click-handler-for-dropdown-and-select.md
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
@@ -1156,6 +1156,11 @@ export default class Select<
   onControlMouseDown = (
     event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
   ) => {
+    // Event captured by dropdown indicator
+    // @ts-ignore
+    if (event.target.closest('.DropdownIndicatorContainer')) {
+      return;
+    }
     const { openMenuOnClick } = this.props;
     if (!this.state.isFocused) {
       if (openMenuOnClick) {
@@ -1202,7 +1207,6 @@ export default class Select<
       this.openMenu('first');
     }
     event.preventDefault();
-    event.stopPropagation();
   };
   onClearIndicatorMouseDown = (
     event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
@@ -1776,6 +1780,7 @@ export default class Select<
 
     return (
       <DropdownIndicator
+        className="DropdownIndicatorContainer"
         {...commonProps}
         innerProps={innerProps}
         isDisabled={isDisabled}