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..7c8dab422c --- /dev/null +++ b/.changeset/allow-event-bubbling-for-all-controls.md @@ -0,0 +1,5 @@ +--- +'react-select': patch +--- + +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 c9048a4ed0..5814ee871d 100644 --- a/packages/react-select/src/Select.tsx +++ b/packages/react-select/src/Select.tsx @@ -1156,6 +1156,10 @@ export default class Select< onControlMouseDown = ( event: React.MouseEvent | React.TouchEvent ) => { + // Event captured by dropdown indicator + if (event.defaultPrevented) { + return; + } const { openMenuOnClick } = this.props; if (!this.state.isFocused) { if (openMenuOnClick) { @@ -1202,7 +1206,6 @@ export default class Select< this.openMenu('first'); } event.preventDefault(); - event.stopPropagation(); }; onClearIndicatorMouseDown = ( event: React.MouseEvent | React.TouchEvent @@ -1217,7 +1220,6 @@ export default class Select< } this.clearValue(); event.preventDefault(); - event.stopPropagation(); this.openAfterFocus = false; if (event.type === 'touchend') { this.focusInput(); @@ -1673,7 +1675,6 @@ export default class Select< onTouchEnd: () => this.removeValue(opt), onMouseDown: (e) => { e.preventDefault(); - e.stopPropagation(); }, }} data={opt}