[Dialog] scrolling issue with react-select inside

[davidavz]

Bug report

Current Behavior

I'm using a react-select component inside of a Dialog component, I had to add a pointer-events: auto to deal with visibility issue but now I'm facing a scrolling issue with my menu list.

Expected behavior

The mouse wheel should works well

Reproducible example

CodeSandbox Template

Suggested solution

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dialog	0.1.5
React		17.0.2
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System

[jjenzz]

I think we might need some more information here as the mouse wheel appears to be working fine in your sandbox for me. Are you able to provide a video capture of the issue you're having? Or some more details like, browser etc.

CleanShot.2022-01-31.at.16.31.14.mp4

[davidavz]

The issue is present only when the list has a long overflow (I have a small screen but you should reproducing it adding more items on the list)

Enregistrement.de.l.ecran.2022-01-31.a.17.37.43.mov

[benoitgrelard]

Given we now have our own Select and this seems to be rather a 3rd party compatibility issue, we won't be prioritising it.

[davidavz]

Hi 👋

I'm still trying to resolve this but for the record, I'm facing the same issue with :

• Material UI Autocomplete component https://codesandbox.io/s/mui-autocomplete-inside-radix-dialog-2hgw1p
• Your Select component https://codesandbox.io/s/radix-select-inside-radix-dialog-5lwgym

[benoitgrelard]

Hey @davidavz, the one with ours works as far as I can tell.

[davidavz]

My bad !
I didn't know the behavior of this component when scrolling.

[fgatti675]

I am having issues with the Radix Dialog and the Radix select.
It only happens if position is set to "popper" apparently

[skysarwer]

I am having issues with the Radix Dialog and the Radix select. It only happens if position is set to "popper" apparently

I am also have the same issues with the Radix Select nested within the Radix Dialog.

[vtkachenko-deeploi]

Replacing RadixUI DialogOverlay with self-written fixed the issue for me.

const DialogOverlay = forwardRef<HTMLDivElement, StyleProps>((props, ref) => {
    return (
        <div
            ref={ref}
            css={css`
                z-index: 100;
                position: fixed;
                pointer-events: auto;
                inset: 0;
                background-color: rgba(0, 0, 0, 0.2);
            `}
        />
    )
})

and my react-select component is something like

const MultiSelect: FC<MultiSelectProps> = ({ options, selectedOptions, onChange, testId }) => {
    return (
        <Select
             menuPortalTarget={document.body}
             menuPosition="fixed"
             styles={{
                menuPortal: (defaultStyles) => ({
                    ...defaultStyles,
                    zIndex: 1100,
                    pointerEvents: 'all',
                }),

[jamesl1001]

I'm experiencing this issue with Radix's AlertDialog and react-select where the scroll wheel refuses to work on a long list of options when the select is inside of the AlertDialog.

And I finally figured out what’s causing this bug!

When the AlertDialog is opened, Radix registers touchmove and scroll event listeners on body which essentially block these two events for anything that’s not in the AlertDialog.

This is implemented using react-remove-scroll here. This <RemoveScroll> component is saying, only allow scroll on its children and any references passed into the shards prop (which in this case, is the AlertDialog.Content).

The problem therefore occurs because, by default, react-select’s menuPortalTarget is set to document.body, which cannot be scrolled.

This is exactly what react-remove-scroll warns of here.

I’ve confirmed this because removing the event listeners using Chrome’s devtools immediately fixes the bug.

@benoitgrelard @jjenzz I'm wondering whether Radix would consider surfacing this shards prop to allow developers better control over scrollable portals? 🙏🏻

[buyonjederrick]

menuPortalTarget={document.body}
menuPosition="fixed"
styles={{
menuPortal: (defaultStyles) => ({
...defaultStyles,
zIndex: 1100,
pointerEvents: 'all',
}),

This worked fine for me with shadcn Dialog

[neilpoulin]

For shadcn users, this comment seems to fix all of the problems for me.

Summary: Update your <DialogContent> component to place your <DialogPrimitive>...</DialogPrimitive> as a child of DialogOverlay instead of a sibling.

[fgatti675]

@benoitgrelard

Given we now have our own Select and this seems to be rather a 3rd party compatibility issue, we won't be prioritising it.

I am facing the same issue with the native Radix Select component. I feel this is an issue with the Dialog component, considering it is impacting so many select alternatives.

@jamesl1001 seems to have found the issue.
Would it make sense to reopen this ticket?
Thank you