Use internal flag to skip duplicate event

Author: rkulinski

.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.

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}

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"

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"

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"

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"

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"