I want to render react-select dropdown inside shadcn dialog. I'm rendering select using portal to document.body and the problem is that once it is open, I cannot click it because its somehow rendered behind the dialog. Here is how it looks like in devtools:
Dialog has position fixed with z-index set to 50 and select is rendred after with z-idnex set to 9999. Even though It appers on top of dialog, I cannot click it. Any suggestions?
I had the same issue where I couldn't click on react-select after it opened.
To fix it, set react-select to use a portal and set pointerEvents to 'auto'. This allows react-select to interact with pointer events and ensures it’s visible at the UI level.
<Select
options={[
{ value: "test", label: "Test" }
]}
menuPortalTarget={document.body}
styles={{
menuPortal: (base) => ({ ...base, pointerEvents: "auto" })
}}
/>
Setting pointerEvents to "auto" and attaching the menu portal to document.body resolves the issue. However, if the menuList is too large and requires scrolling, it may still encounter scroll-related problems. To fix this, add the onWheel property to the Dialog component.
<DialogPortal>
<DialogOverlay className={overlayClassname} />
<DialogPrimitive.Content
onWheel={(e) => e.stopPropagation()}
Sounds like a typical styling error, need more information, can you provide the code from the component? incl. the css (looks like you use tailwind).
Also, how does the state management look like?
I assume you code looks something like this:
import React from 'react';
import * as Dialog from '@radix-ui/react-dialog';
import './styles.css';
import Select from 'react-select'
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
const DialogWithReactSelect = () => (
<Dialog.Root>
<Dialog.Trigger asChild>
<button className="Button violet">Open Dialog</button>
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className="DialogOverlay" />
<Dialog.Content className="DialogContent">
<Dialog.Title className="DialogTitle">This is a dialog</Dialog.Title>
<Dialog.Description className="DialogDescription">
This dialog contains a react-select component.
</Dialog.Description>
<Select options={options} />
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
);
export default DialogWithReactSelect;
