Combination of menuPortalTarget and menuShouldBlockScroll causes click on document

[AdrianMrn]

Are you reporting a bug or runtime error?

Bug

I set up the dev server with the docs on my machine to see if this was my setup, but it happens there too.

When creating a Select component with menuPortalTarget={document.body} and menuShouldBlockScroll={true} and opening the select, a click event is propagated to the document, even when I've wrapped the select component in a div with onClick={e => e.stopPropagation()}.

This would be logical when clicking on the menu itself (which is rendered in a portal so outside of my stopPropagation), but not when clicking on the input itself, which is definitely still a child of the propagation-stopping div.

I need the combination of both of these props to fix other issues in my app (mainly z-index issues and this one: #4088)

In my app, I'm rendering the select in a dropdown that listens to a click event on document to close the dropdown, opening the select instantly closes the dropdown because of this bug.

I've narrowed it down to this fixed div being rendered over the screen (which I believe is all menuShouldBlockScroll does):

react-select/packages/react-select/src/internal/ScrollManager.tsx

Lines 45 to 50 in 4d3b1aa

	{lockEnabled && (
	<div
	onClick={blurSelectInput}
	css={{ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 }}
	/>
	)}

Even when wrapping the ScrollManager in a div that stops propagation of the click event, this still happens.

The click event has a srcElement of body for some reason. Could this mean this is being caused by a strange combination of a mouseUp and mouseDown event being triggered on 2 separate elements?

Any idea what I could do differently to get this to work, or any pointers to how I could better debug this?

[Rall3n]

Hello @AdrianMrn,

would be so kind and provide a minimal reproducible example using CodeSandbox as requested in the issue template?

[EliteUser]

I have faced another problem with this combination. If menuPortalTarget={document.body} and menuShouldBlockScroll={true} you cant interact with the control itself: e.g. you can't delete value in multiple mode. This property is useful in floating contexts, like popup.
Another solution - closeMenuOnScroll={true} also does NOT work in scroll containers. Looks like it only works for body, not any container. So it leads to the situation where menu is unattached from control. So there is no stable solution to make select work inside popup with scrollable content.

I created an example: https://codesandbox.io/p/sandbox/codesandboxer-example-forked-6zxm7p?file=%2Fexample.tsx%3A29%2C9-29%2C26