From 0aaa9575ed7e817841b9c9b494b4bd4dc2247b26 Mon Sep 17 00:00:00 2001
From: robert <robert.kulinski93@gmail.com>
Date: Mon, 28 Feb 2022 20:19:37 +0100
Subject: [PATCH 1/6] Add changeset

---
 .changeset/allow-event-bubbling-for-all-controls.md | 5 +++++
 packages/react-select/src/Select.tsx                | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/allow-event-bubbling-for-all-controls.md

diff --git a/.changeset/allow-event-bubbling-for-all-controls.md b/.changeset/allow-event-bubbling-for-all-controls.md
new file mode 100644
index 0000000000..f184c8fc9a
--- /dev/null
+++ b/.changeset/allow-event-bubbling-for-all-controls.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Replace stopPropagation with target check.
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index c9048a4ed0..3579bef962 100644
--- 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}

From 0664913e32121cf9736abf77decd9aecfc7fef08 Mon Sep 17 00:00:00 2001
From: robert <robert.kulinski93@gmail.com>
Date: Wed, 2 Mar 2022 11:30:12 +0100
Subject: [PATCH 2/6] Update tests

---
 .../src/__tests__/__snapshots__/Async.test.tsx.snap             | 2 +-
 .../src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap    | 2 +-
 .../src/__tests__/__snapshots__/Creatable.test.tsx.snap         | 2 +-
 .../src/__tests__/__snapshots__/Select.test.tsx.snap            | 2 +-
 .../src/__tests__/__snapshots__/StateManaged.test.tsx.snap      | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
index cac1b28d31..ec26ad9a38 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
@@ -220,7 +220,7 @@ exports[`defaults - snapshot 1`] = `
         />
         <div
           aria-hidden="true"
-          class=" emotion-9"
+          class="DropdownIndicatorContainer emotion-9"
         >
           <svg
             aria-hidden="true"
diff --git a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
index cac1b28d31..ec26ad9a38 100644
--- a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
@@ -220,7 +220,7 @@ exports[`defaults - snapshot 1`] = `
         />
         <div
           aria-hidden="true"
-          class=" emotion-9"
+          class="DropdownIndicatorContainer emotion-9"
         >
           <svg
             aria-hidden="true"
diff --git a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
index cac1b28d31..ec26ad9a38 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
@@ -220,7 +220,7 @@ exports[`defaults - snapshot 1`] = `
         />
         <div
           aria-hidden="true"
-          class=" emotion-9"
+          class="DropdownIndicatorContainer emotion-9"
         >
           <svg
             aria-hidden="true"
diff --git a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
index 57e13381d2..33591f5fbe 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
@@ -220,7 +220,7 @@ exports[`snapshot - defaults 1`] = `
         />
         <div
           aria-hidden="true"
-          class=" emotion-9"
+          class="DropdownIndicatorContainer emotion-9"
         >
           <svg
             aria-hidden="true"
diff --git a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
index cf72ac2e74..c4771b1486 100644
--- a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
@@ -220,7 +220,7 @@ exports[`defaults > snapshot 1`] = `
         />
         <div
           aria-hidden="true"
-          class=" emotion-9"
+          class="DropdownIndicatorContainer emotion-9"
         >
           <svg
             aria-hidden="true"

From 53cc8ce7f87ed660276361b6d89e8fb175c19ac6 Mon Sep 17 00:00:00 2001
From: robert <robert.kulinski93@gmail.com>
Date: Wed, 2 Mar 2022 17:34:30 +0100
Subject: [PATCH 3/6] Use internal flag to skip duplicate event

---
 .changeset/allow-event-bubbling-for-all-controls.md        | 2 +-
 packages/react-select/src/Select.tsx                       | 7 ++++---
 .../src/__tests__/__snapshots__/Async.test.tsx.snap        | 2 +-
 .../__tests__/__snapshots__/AsyncCreatable.test.tsx.snap   | 2 +-
 .../src/__tests__/__snapshots__/Creatable.test.tsx.snap    | 2 +-
 .../src/__tests__/__snapshots__/Select.test.tsx.snap       | 2 +-
 .../src/__tests__/__snapshots__/StateManaged.test.tsx.snap | 2 +-
 7 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/.changeset/allow-event-bubbling-for-all-controls.md b/.changeset/allow-event-bubbling-for-all-controls.md
index f184c8fc9a..574e0f16e5 100644
--- a/.changeset/allow-event-bubbling-for-all-controls.md
+++ b/.changeset/allow-event-bubbling-for-all-controls.md
@@ -2,4 +2,4 @@
 'react-select': patch
 ---
 
-Replace stopPropagation with target check.
+Use internal flag to prevent duplicate event handler for clicking select.
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 3579bef962..0ab507314d 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -594,6 +594,7 @@ export default class Select<
   openAfterFocus = false;
   scrollToFocusedOptionOnUpdate = false;
   userIsDragging?: boolean;
+  dropdownEventAlreadyHandled = false;
 
   // Refs
   // ------------------------------
@@ -1157,8 +1158,8 @@ export default class Select<
     event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
   ) => {
     // Event captured by dropdown indicator
-    // @ts-ignore
-    if (event.target.closest('.DropdownIndicatorContainer')) {
+    if (this.dropdownEventAlreadyHandled) {
+      this.dropdownEventAlreadyHandled = false;
       return;
     }
     const { openMenuOnClick } = this.props;
@@ -1197,6 +1198,7 @@ export default class Select<
     ) {
       return;
     }
+    this.dropdownEventAlreadyHandled = true;
     if (this.props.isDisabled) return;
     const { isMulti, menuIsOpen } = this.props;
     this.focusInput();
@@ -1780,7 +1782,6 @@ export default class Select<
 
     return (
       <DropdownIndicator
-        className="DropdownIndicatorContainer"
         {...commonProps}
         innerProps={innerProps}
         isDisabled={isDisabled}
diff --git a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
index ec26ad9a38..cac1b28d31 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
@@ -220,7 +220,7 @@ exports[`defaults - snapshot 1`] = `
         />
         <div
           aria-hidden="true"
-          class="DropdownIndicatorContainer emotion-9"
+          class=" emotion-9"
         >
           <svg
             aria-hidden="true"
diff --git a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
index ec26ad9a38..cac1b28d31 100644
--- a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
@@ -220,7 +220,7 @@ exports[`defaults - snapshot 1`] = `
         />
         <div
           aria-hidden="true"
-          class="DropdownIndicatorContainer emotion-9"
+          class=" emotion-9"
         >
           <svg
             aria-hidden="true"
diff --git a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
index ec26ad9a38..cac1b28d31 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
@@ -220,7 +220,7 @@ exports[`defaults - snapshot 1`] = `
         />
         <div
           aria-hidden="true"
-          class="DropdownIndicatorContainer emotion-9"
+          class=" emotion-9"
         >
           <svg
             aria-hidden="true"
diff --git a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
index 33591f5fbe..57e13381d2 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
@@ -220,7 +220,7 @@ exports[`snapshot - defaults 1`] = `
         />
         <div
           aria-hidden="true"
-          class="DropdownIndicatorContainer emotion-9"
+          class=" emotion-9"
         >
           <svg
             aria-hidden="true"
diff --git a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
index c4771b1486..cf72ac2e74 100644
--- a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
@@ -220,7 +220,7 @@ exports[`defaults > snapshot 1`] = `
         />
         <div
           aria-hidden="true"
-          class="DropdownIndicatorContainer emotion-9"
+          class=" emotion-9"
         >
           <svg
             aria-hidden="true"

From 150c02028aa8e47f4071357e44f4c0daeda44a18 Mon Sep 17 00:00:00 2001
From: robert <robert.kulinski93@gmail.com>
Date: Fri, 25 Mar 2022 14:28:26 +0100
Subject: [PATCH 4/6] Use defaultPrevented instead of internal flag

---
 .changeset/allow-event-bubbling-for-all-controls.md | 2 +-
 packages/react-select/src/Select.tsx                | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/.changeset/allow-event-bubbling-for-all-controls.md b/.changeset/allow-event-bubbling-for-all-controls.md
index 574e0f16e5..7c8dab422c 100644
--- a/.changeset/allow-event-bubbling-for-all-controls.md
+++ b/.changeset/allow-event-bubbling-for-all-controls.md
@@ -2,4 +2,4 @@
 'react-select': patch
 ---
 
-Use internal flag to prevent duplicate event handler for clicking select.
+Use defaultPrevented to skip duplicate event handler for clicking select.
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 0ab507314d..5a09247449 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -594,7 +594,6 @@ export default class Select<
   openAfterFocus = false;
   scrollToFocusedOptionOnUpdate = false;
   userIsDragging?: boolean;
-  dropdownEventAlreadyHandled = false;
 
   // Refs
   // ------------------------------
@@ -1158,8 +1157,7 @@ export default class Select<
     event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
   ) => {
     // Event captured by dropdown indicator
-    if (this.dropdownEventAlreadyHandled) {
-      this.dropdownEventAlreadyHandled = false;
+    if (event.defaultPrevented) {
       return;
     }
     const { openMenuOnClick } = this.props;
@@ -1198,7 +1196,6 @@ export default class Select<
     ) {
       return;
     }
-    this.dropdownEventAlreadyHandled = true;
     if (this.props.isDisabled) return;
     const { isMulti, menuIsOpen } = this.props;
     this.focusInput();

From d6685d1d10a9ad3fa88390781eb05255f9773617 Mon Sep 17 00:00:00 2001
From: robert <robert.kulinski93@gmail.com>
Date: Mon, 28 Mar 2022 18:05:06 +0200
Subject: [PATCH 5/6] Remove stopPropagation from onClearIndicatorMouseDown

---
 packages/react-select/src/Select.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 5a09247449..ba79fd243f 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -1220,7 +1220,6 @@ export default class Select<
     }
     this.clearValue();
     event.preventDefault();
-    event.stopPropagation();
     this.openAfterFocus = false;
     if (event.type === 'touchend') {
       this.focusInput();

From 02b794b52da4ecf6f8701fd24c9a138f3c046aab Mon Sep 17 00:00:00 2001
From: robert <robert.kulinski93@gmail.com>
Date: Tue, 29 Mar 2022 19:32:21 +0200
Subject: [PATCH 6/6] Remove stopPropagation from onMouseDown on multi select
 items

---
 packages/react-select/src/Select.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index ba79fd243f..5814ee871d 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -1675,7 +1675,6 @@ export default class Select<
               onTouchEnd: () => this.removeValue(opt),
               onMouseDown: (e) => {
                 e.preventDefault();
-                e.stopPropagation();
               },
             }}
             data={opt}